Pass PHP variable to bootstrap modal

put this inside your loop

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>

<div id="message<?php echo $row['id'];?>" 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">×</button>        <h4 class="modal-title">Modal Header</h4>      </div>      <div class="modal-body">        <p>Some text in the modal.</p>        <?php echo $row['id'];?>      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>      </div>    </div>  </div></div>

If, I got you correct.

The modal trigger button with $row['ID']

$order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>';

Bootstrap Modal event to fetch the $row['ID'] value with Ajax method

$(document).ready(function(){    $('#myModal').on('show.bs.modal', function (e) {        var rowid = $(e.relatedTarget).data('id');        $.ajax({            type : 'post',            url : 'fetch_record.php', //Here you will fetch records             data :  'rowid='+ rowid, //Pass $id            success : function(data){            $('.fetched-data').html(data);//Show fetched data from database            }        });     });});

Modal HTML

<div class="modal fade" id="myModal" role="dialog">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal">×</button>                <h4 class="modal-title">Edit Data</h4>            </div>            <div class="modal-body">                <div class="fetched-data"></div> //Here Will show the Data            </div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>            </div>        </div>    </div></div>

Last Create fetch_record.php, retrieve the record and show in modal

<?php//Include database connectionif($_POST['rowid']) {    $id = $_POST['rowid']; //escape string    // Run the Query    // Fetch Records    // Echo the data you want to show in modal }?>

adding the modal in a loop is auto duplicating the html content when it is not really necessary! it is not a good practice to add a modal to each item in a loop instead call the data only when it is requested!

here is an example add the following button to a loop in php

<button data-id="<?php echo $note['id']; ?>"  onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click me </button>

on your modal you can know use that id to make a request to your db or any json

example assuming you are using a modal called showmodal use this info to make a new request to your database or desire class or function!

<?php $dataid = '<span id="dataid"/>'; echo $dataid; ?>

The echo $dataid is only to show you that the id of the clicked item in the loop really works.

as you can see here we are only adding 1 single html template in the loop and we are also only calling data when it is being requested! this will save memory and also will be faster.

I hope this helps many people