Load Data Dynamically on Bootstrap Modal with help of ajax - Laravel

Question

Page: default.blade.php

Hello what I want is, when I click on show button, the below modal should open, and it should consist data from database and through ajax, so please help me out in this. Any help is highly appreciated.

<div class="container">
          <table class="table">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Name</th>
                          <th width="300">Adress</th>
                          <th>Contact</th>
                          <th>Email</th>
                          <th>Phone</th>
                          <th>Show</th>
                          <th>Edit</th>
                          <th>Delete</th>

                        </tr>
                      </thead>
                      <tbody>


                     @foreach ($usertoshow as $us)

                      <tr>
                        <td>{{$us->u_id}}</td>
                        <td>{{$us->u_name}}</td>
                        <td>{{$us->u_add}}</td>
                        <td>{{$us->u_contact}}</td>
                        <td>{{$us->u_eml}}</td>
                        <td>{{$us->u_phn}}</td>
                        <td>
                          <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#clientInfo" id="showButton"><span class="glyphicon glyphicon-th"></span> **Show**</button>
                        </td>
                        <td>
                          <button type="button" class="btn btn-xs btn-info"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
                        </td>
                        <td>
                          <button type="button" class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-remove-sign"></span> Delete</button>
                        </td>

                      </tr>

                      @endforeach

                      </tbody>

                </table>

          </div>

Code for Modal is

<div class="modal fade" id="clientInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

           <div class="alert alert-info" role="alert">
            Name: <strong></strong> 
          </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Code of Controller

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;

use Illuminate\Http\Request;
use App\User;
use View,
    Response,
    Validator,
    Input,
    Mail,
    Session;



class UserController extends Controller {

    /**
     * Display a listing of the resource.
     *
     * @return Response
     */
    public function index()
    {
        $usertoshow = User::all();
        return view('pages.default')->with('usertoshow',$usertoshow);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function insert()
    {

        $user = User::create(['u_name' => Input::get('inputName'), 'u_eml' => Input::get('inputMail'), 'u_srname' => Input::get('inputsurName'),'u_add' => Input::get('inputAdd'),'u_phn' => Input::get('inputPhone'),'u_contact' => Input::get('inputContact')]);

    }

    /**
     * Store a newly created resource in storage.
     *
     * @return Response
     */
    public function showdetail()
    {


    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function update($id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function destroy($id)
    {
        //
    }

}

Answer 1

You need to add a modal for each "show" just before your @foreach add ( incude a file to do the modal code )

@include ('layouts.modals.genModal' , ['record' => $us])

in genModal
some thing like this:

<div class="modal fade"
  id="show-form{{{ $record->id }}}" tabindex="-1" role="dialog" 
  aria-labelledby="myModalLabel" area-hidden="true"
  style="display: none;" >

.... res of modal stuff

and change your data-traget to be the same us id

<button type="button" class="btn btn-xs btn-success" 
  data-toggle="modal" data-target="#clientInfo" 
  id="showButton">
  <span class="glyphicon glyphicon-th"></span> **Show**
</button>

data-target="#show-form{{{ $record->id }}}"

Will work for show / edit / delete , validation is not that easy if somebody out there have a solution please advise.