CODEWITHSUNDEEP
phpjquerylaravel
user3386779
user3386779

Reputation: 7175

pass the database value to modal popup

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>

Upvotes: 0

Views: 5213

Answers (2)

matthiku
matthiku

Reputation: 3730

You can do it the way @Komal suggested, but I would not do another AJAX request since you already have all the data you need for the modal in your current view. This saves you also from writing another controller.

Add the data you need into the <a> element and use it to fill in the data into the modal popup by adding a simple 'on load' method for the modal.

Here is the code.

<td>
   <a href="#" class="viewPopLink" role="button" 
      data-id="{{ $user->p_id }}" data-name="{{ $user->p_name }}" data-age="{{ $user->p_age }}" 
      data-toggle="modal" data-target="#myModal">{{ $user->p_name }}<a>
</td>

Add this into the modal body:

<p>
  <span>ID</span><span id="modal_p_id"></span>
  <span>Name</span><span id="modal_p_name></span>
  <span>Age</span><span id="modal_p_age"></span>
</p>

Add this script into your view:

<script>
    /* populate the modal popup when it's launched, with the data provided by the launching button ....  */
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var id       = button.data('id');    // Extract info from data-* attributes
        var age      = button.data('age');
        var name     = button.data('name');
        // Update the modal's content
        var modal = $(this);
        modal.find('.modal-title').text('Information for Passenger ' + name);
        modal.find('#modal_p_id').text(id);
        modal.find('#modal_p_name').text(filename);
        modal.find('#modal_p_age').text(age);
    });
</script>

Upvotes: 4

Komal
Komal

Reputation: 2736

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

Upvotes: 1

Related Questions