将数据库值传递给模态弹出窗口

Question

I want to pass the fetched database value to modal popup.I have fetched values from database and listed as table with pagination.

'name' field has link and will show model popup while triggering a link.I want to list the details of name which I check from the link in laravel 5.3.

Now model pop up trigered with 'Modal Header 3' for all link.I want to know how to pass the value modal popup and show the details of particular id. I want to know to know shall I need separate page or controller to do this.Where to write the query for modal popup.How can I display the details of specific Id.

id name age

1 xx 26

2 yy 28

3 zz 30

<table border = 1>
     <tr>
        <td>ID</td>
        <td>Passanger Name</td>
        <td>Destination</td>
        <td>Created Date</td>
     </tr>
     @foreach ($users as $user)
     <tr>
        <td>{{ $user->p_id }}</td>
        <td><a href="#" class="viewPopLink" role="button" data-id="{{ $user->p_id }}" data-toggle="modal" data-target="#myModal">{{ $user->p_name }}<a></td>
        <td>{{ $user->destination }}</td>
        <td>{{ $user->created_date }}</td>
    </tr>
     @endforeach

  </table>
{{$users->links()}}

 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header {{ $user->p_id }}</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

Answer 1

Use jquery ajax request and get user data to set modal

 $(document).on('click', '.viewPopLink', function() {    
    var user_id = $(this).data('id');
    $.ajax({
      url: 'user/get-details',
      type: 'GET',
      data: 'id='+user_id,
      dataType: 'JSON',
      success: function(data, textStatus, jqXHR){
        var name = data.name;
        $('.modal-title').html('<span>Modal Header ' + name + '</span>');   
        $('#myModal').modal('show');
      },
      error: function(jqXHR, textStatus, errorThrown){

      },
    });    
  });

Controller method

  //Get user data
  public function getDetails(Request $request)
  {
    $request_data = $request->all();
    $user_id = $request_data['id'];
    $user_data = User::where('id', $user_id)->first();
    return response()->json($user_data);
  }