Show dynamic content in bootstrap modal ONCLICK event - php

Question

I have a table containing a list generated from mySQL database. Each record have a view button corresponding to it. I want to display the row information in bootstrap modal popup when someone clicks on the view button.
Issue
Not showing popup modal on first click. The modal shows up on second click. Also after closing the modal and clicking on another view button, the modal displays previously selected content.
Is there any alternative solution to overcome the problem?
My home page like
<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">×</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

Show modal then load ajax content
<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">×</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>