Wie ID an das Bootstrap-Modal übergeben?

Question

Ich verwende Bootstrap-Modal, um Mitgliedsinformationen anzuzeigen. Jedes Mitglied hat die Schaltfläche, um das Modal zu öffnen. Ich habe diese Schaltfläche in der Schleife:

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

Diesen modalen Inhalt:

<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> 

Aber jedes Mal bekomme ich die Informationen des letzten Mitglieds. Dies ist offensichtlich, aber ich möchte die $member->ID von der Schaltfläche übergeben und ihre jeweiligen Details im Modal anzeigen. Wie kann ich das erreichen?

Answer 1

Sie können data Attribut verwenden, um einige Daten in Bootstrap Modal zu übergeben.

Buttons in der Schleife

@foreach() 

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

@endforeach 

Bootstrap-Modell

<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> 

Und wenig JavaScript

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

Das ist es

Kleine Demo hier: http://jsfiddle.net/Au9tc/6247/