CODEWITHSUNDEEP
phptwitter-bootstraplaravel
Steve
Steve

Reputation: 1672

How to pass id to the bootstrap modal?

I am using bootstrap modal to display member's information. Each member has the button to open the modal. I have this button in loop:

@foreach($members as $member)
    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View Details</button>
@endforeach

This modal content:

<div id="myModal" class="modal fade" 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">Member Detail Information</h4>
             </div>

             <div class="modal-body">
                  {{$member->name}}
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
   </div>

But everytime I get the last member's information. This is obvious but i want to pass the $member->ID from the button and dispaly their respective details in the modal. How Can I acheive this?

Upvotes: 0

Views: 5984

Answers (1)

Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

You can use data attribute to pass some data into Bootstrap modal.

Buttons in the loop

@foreach()

     <a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>

@endforeach

Bootstrap model

<div class="modal hide" id="UserDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="user_name" id="user_name" value=""/>
    </div>
</div>

And little JavaScript

$(document).on("click", ".user_dialog", function () {
     var UserName = $(this).data('id');
     $(".modal-body #user_name").val( UserName );
});

That's it

Little demo here : http://jsfiddle.net/Au9tc/6247/

Upvotes: 2

Related Questions