Pass PHP Variable to Bootstrap Modal

Pass PHP variable to bootstrap modal

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 connection
if($_POST['rowid']) {
    $id = $_POST['rowid']; //escape string
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

pass php variables to bootstrap modal from button click no ajax

In your code, data you pass through data-vendor and data-id-product-name are not printed. If you see the source they will be empty.

Try printing the data you pass for these values from PHP.

See the modification I have done below

<button type="button" class="open-details-modal btn btn-primary" 
data-vendor="<?php echo $product['Vendor']; // <--- check this ?>" 
data-id-product-name="<?php echo $product['ProductName']; // <--- check this ?>" 
href="#detailsmodal" data-target="#detailsModal">Product Details</button>

How to pass a GET variable in Bootstrap Modal?

Bootstrap modal href is not calling your page when you click. Your page is already loaded when you include userDetails.php. So you can define the get before the include or pass the user id through GET variable.

So:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
    <div class="modal-dialog modal-lg">

        <?php
            $_GET['id_user'] = $rel['id_user'];
            include('userDetails.php');
        ?>

    </div>
</div>

In a LOOP

If you have a loop and want to do it dynamically through the jQuery you can do the following:

Remove the bootstrap calls from your link, and add a trigger class modal-btn and make it like:

<a 
    class="btn btn-primary modal-btn btn-xs"
    href="userDetails.php?id_user=<?= $rel['id_user'] ;?>"><?= $rel['id_user'] ;?>
</a>

Update your modal structure and remove the include():

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user"> 
  <div class="modal-dialog modal-lg">   
    <div class="modal-content"></div>    
  </div> 
</div>

The jQuery should get the href property of the link and call the bootstrap modal function load and also force the modal to show

$(".modal-btn").on('click',function(e){ //trigger when link clicked
   e.preventDefault(); 
   $('#modal-user').modal('show'); //force modal to show
   $('.modal-content').load( $(this).attr('href')); //load content from link's href
});

So your page userDetails.php will be loaded inside the modal, and you will need to remove the <div class="modal-content">...</div> from it to avoid duplication...

pass php variable in modal bootstrap

In my project I'm using data- attributes.

Example. Look, how do I pass code to modal.

Link:

<a href="#modal-info" class="text-muted" data-toggle="modal" data-code="{{ code }}">

Modal:

<div class="modal fade" id="modal-info">
    <dd name="code"></dd>
</div>

Event listener:

$('#modal-info').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var code   = button.data('code');
    var modal  = $(this);

    modal.find('[name="code"]').text(code);
}

---

Related Topics