Show dynamic content in bootstrap modal ONCLICK event

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

so you just want to pass the onpage table row information to modal? — Shehary, Jun 23 '16 at 07:29
actually by using that parameter i want to do something on remote.php and display to the modal — Jasir alwafaa, Jun 23 '16 at 08:02
i refer ur answer http://stackoverflow.com/questions/34693863/pass-php-variable-to-bootstrap-modal/34695333#34695333 , but how can i pass multiple parameter — Jasir alwafaa, Jun 23 '16 at 08:05
try this answer http://stackoverflow.com/questions/32433765/how-to-pass-get-variables-from-a-link-to-a-bootstrapmodal/32434127#32434127, at the end check "pass on page information" and in comments, there is fiddle example — Shehary, Jun 23 '16 at 08:09

score 0 · Answer 1 · answered Jan 21 '17 at 04:34

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

Show dynamic content in bootstrap modal ONCLICK event

1 Answers1