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

You need to paas route instead of the name of the blade file — Sagar Jajoriya
– Sagar Jajoriya, Commented May 15, 2017 at 11:26
Can you please post your routes file and controller method as well? — Yasen Slavov
– Yasen Slavov, Commented May 15, 2017 at 13:18

Rezrazi · Accepted Answer · 2017-05-15 14:09:11Z

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

AM DEV · Accepted Answer · 2017-05-15 13:51:36Z

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'));
}

Collectives™ on Stack Overflow

Passing dynamic data to bootstrap modal with Laravel using jQuery post

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related