Passing dynamic data to bootstrap modal with Laravel using jQuery post

Question

I am trying to pass dynamic data to a bootstrap modal. What i want to do is pass the data-id by using jQuery post request. I have my view users containing a list with the users. when i click on details button i want to pass the id using jquery post and then using eloquent, retrieve everything about each user.

my view

<table class="table">
    <thead class="thead-default">
           <tr>
               <th>No.</th>
               <th>Name</th>
               <th>Actions</th>
           </tr>
           </thead>
           <tbody>
           <?php use App\User;
             $users = \App\User::where('admin',0)->get();
             $i = 1;?>
       @foreach($users as $user)
           <tr id="{{$user->id}}">
              <th scope="row">{{$i}}</th>
                <td width="65%">{{ucfirst($user->name)." ".ucfirst($user->surname)}}</td>
                <td>
                  <button class="btn btn-info infoU" 
                   data-toggle="modal" 
                   data-target="#viewUser"
                   data-id="{{$user->id}}">
                   <span class="glyphicon glyphicon-file"></span> 
                   Details</button>
                </td>
          </tr>
          <?php $i++ ?>
       @endforeach
                            </tbody>
                        </table>

my script

$(document).ready(function () {

            $(".infoU").click(function (e) {
                $('#pic').attr('src',$(this).attr("data-pic"));
                $currID = $(this).attr("data-id");
                $.post("detail.blade.php", {id: $currID}, function (data) {
                    $('#user-data').html(data);
                    }
                );
            });
        });

my modal

<div class="modal fade" id="viewUser" role="dialog">
        <div class="modal-dialog" style="min-height: 800px">
            <div class="modal-content">
                <form method="get" action="">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h2 class="modal-title" style="color: #BC0E91">User Details</h2>
                </div>
                <div class="modal-body">
                    <div id="user-data">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
                </form>
            </div>
        </div>
    </div>

detail.blade.php

    <?php

if ($_REQUEST['id']){
    $id = $_REQUEST['id'];
    echo $id;
}
$usr = \App\User::where('id', $id)->first();

?>

I don't know why this is not working and i am not sure if i can pass a route instead of detail.blade.php in the script. Any help is much appreciated. Thank you

Answer 1

Blade and Eloquent
First it's not recommended to have eloquent queries within your blade views, as it comes against it's initial purpose.
The proper to do it, is for say you have this controller :

MyController.php

...
use App\User;
class MyController extends Controller{
      public function MyMethod(){
             $users = User::where('admin',0)->get();
             return view('myview',['users'=>$users]);
      }
}

and then in your view
myview.blade.php

<table class="table">
<thead class="thead-default">
       <tr>
           <th>No.</th>
           <th>Name</th>
           <th>Actions</th>
       </tr>
       </thead>
       <tbody>
   @foreach($users as $user)
       <tr id="{{$user->id}}">
          <th scope="row">{{$loop->iteration}}</th> {-- Learn more about it at https://laravel.com/docs/5.4/blade#the-loop-variable --}
            <td width="65%">{{ucfirst($user->name)." ".ucfirst($user->surname)}}</td>
            <td>
              <button class="btn btn-info infoU" 
               data-toggle="modal" 
               data-target="#viewUser"
               data-id="{{$user->id}}">
               <span class="glyphicon glyphicon-file"></span> 
               Details</button>
            </td>
      </tr>
   @endforeach
</tbody>
</table>

---

Api request

To get the user details, the best way is to do it via an api route that uses a controller.

So create a controller (or use an existent one) and try this (Named the controller here as UserController for demo purposes:

public function showUser($id){
     return User::findOrFail($id);
}

and in your routes/api.php

Route::get('user/{id}', ['uses' => 'UserController@showUser']);

Now if you try your api route via curl or Postman you should get your data.

---

Javascript

And then in your javascript file, you should change it to this

$.get("user/"+$currID, function (data) {
    $('#user-data').html(data);
// For debugging purposes you can add : console.log(data); to see the output of your request
});

---

Notes

You made a request detail.blade.php that cannot be done since the file is not accessible. You should use controllers and point your routes to them.
For further reading, I recommend :
Laravel Ajax post/get examples at Laracasts
Laravel 5 Ajax tutorial at Kode Blog

Answer 2

EDIT: my route is:

    Route::post('/user/details/{id}', ['uses' => 'dataController@viewUser', 'as' => 'user.details']);

and my function is

public function viewUser(Request $request){

    $user = User::where('id', $request->id)->first();
    $langs = Language::all();
    $children = Child::where('user_id', $request->id)->get();
    $usrlang = DB::table('language_user')->where('user_id', $request->id)->get();
    $usrhob = DB::table('user_hobbies')->where('user_id', $request->id)->get();
    $userCh = [];
    $userLang = [];
    $userHobby = [];
    $chLang = [];
    $chHobby = [];

    foreach ($usrlang as $language){
        $userLang[] = $language;
    }
    foreach ($usrhob as $hobby){
        $userHobby[] = $hobby;
    }
    foreach ($children as $child){
        $userCh[] = $child;
        $languagesCh = DB::table('child_language')->where('child_id', $child->id)->get();
        $hobbiesCh = DB::table('child_language')->where('child_id', $child->id)->get();
        foreach ($languagesCh as $chL){
            $chLang[] = $chL;
        }
        foreach ($hobbiesCh as $chH){
            $chHobby[] = $chH;
        }
    }

    return view('detail', compact('user','langs', 'children', 'usrlang', 'usrhob', 'userCh', 'userLang', 'userHobby', 'chHobby', 'chLang'));
}