Dynamischen Inhalt im bootstrap modalen ONCLICK-Ereignis anzeigen

Question

Ich habe eine Tabelle mit einer Liste generiert aus mySQL Datenbank. Jeder Datensatz hat eine entsprechende Ansichtsschaltfläche. Ich möchte die Zeileninformationen im bootstrap-modalen Popup anzeigen, wenn jemand auf die Ansicht-Schaltfläche klickt.

Problem Kein Popup-Modal beim ersten Klick angezeigt. Das Modal erscheint beim zweiten Klick. Auch nach dem Schließen des Modales und dem Klicken auf eine andere Ansichtsschaltfläche zeigt das Modal den zuvor ausgewählten Inhalt an.

Gibt es eine alternative Lösung, um das Problem zu lösen?

Meine Startseite wie

<div class="modal-container"></div> 


<table width="100%" border="1"> 

<?php 
for($i=1;$i<=10;$i++){ 
?> 
    <tr> 
    <td>Name</td> 
    <td>Location</td> 
    <td><a data-toggle="modal" href="#myModal" onclick="showmodal("<?=$i;?>","row_<?=$i;?>")">View</a></td> 
    </tr> 
<?php 
} 
?> 
</table> 

jquery ->

function showmodal(id,category){ 
    var url = "remote.php"; 
    $('.modal-container').load(url,{var1:id,var2:category},function(result){ 


      $('#myModal').modal({show:true}); 
    }); 
} 

remote.php

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Sample Model Box - Header Area</h4> 
      </div> 
      <div class="modal-body"> 
       <?php 
       echo $_REQUEST['var1']; 
       echo $_REQUEST['var2']; 
       ?> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

zeigen dann modal Laden Sie Ajax-Inhalt

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Sample Model Box - Header Area</h4> 
      </div> 
      <div class="modal-body"> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

<table width="100%" border="1"> 
    <?php 
    for($i=1;$i<=10;$i++){ 
    ?> 
    <tr> 
     <td>Name</td> 
     <td>Location</td> 
     <td><a data-toggle="modal" data-target="#myModal" href="#myModal" data-id="<?=$i;?>" data-category="<?=$i;?>">View</a></td> 
    </tr> 
    <?php 
} 
?> 
</table> 

<script type="text/javascript"> 

$('#myModal').on('show.bs.modal', function (event) { 
    var clickedLink = $(event.relatedTarget); // clickedLink that triggered the modal 
    var id = clickedLink.data('id'); // Extract info from data-id attributes 
    var category = clickedLink.data('category'); // Extract info from data-category attributes 
    var modal = $(this); 
    modal.find('.modal-body').load('remote.php',{var1:id,var2:category}); 
}); 
</script>