pass php variables to bootstrap modal from button click no ajax

Question

I am trying to pass pass my php variables to a bootstrap modal upon click. For some reason the data is not showing when the modal creates.

<!-- Index.php -->
<?php while($product = mysqli_fetch_assoc($featured)) :?>

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


  </div>
<?php endwhile; ?>

<!--footer.php-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(".open-details-modal").click(function() {
$("#name").html($(this).data("product-name"));
$("#vendor").html($(this).data("vendor"));

$("#detailsModal").modal("show");

});
});

<!--detailsmodal.php-->
<!-- Details Light Box -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="Product Details" aria-hidden="true">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title text-center" id="name"></h4>
  </div>
  <div class="modal-body">
    <p><strong>Vendor</strong> <span id="vendor"></span></p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>Add to Cart</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

  </div>
</div>

Is there a reason why the data is not being passed to the modal? When i print it straight from the loop to the page the data is there so i know there is nothing wrong there.

Ok.Please refer below link.I think you will get some solution. Use `attr` for your issue. `https://stackoverflow.com/questions/7177512/jquery-get-value-of-custom-attribute` — Arshad Shaikh, Jul 01 '17 at 05:35

score 1 · Answer 1 · answered Jul 01 '17 at 05:33

1

<script> 
$(document).ready(function() {
   $(".open-details-modal").click(function() {
     $("#name").text($(this).attr('data-id-product-name'));
     $("#vendor").text($(this).attr('data-vendor'));
     $("#detailsModal").modal("show");
  });
});
</script>

answered Jul 01 '17 at 05:33

Ankit Singh

1,477
1
13
22

Thanks for the answer this helps. I also needed to echo the values in my index.php file – jumpman8947 Jul 01 '17 at 05:43

Lepanto · Accepted Answer · 2017-07-01T05:43:06.333

1

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>

edited Jul 01 '17 at 05:43

answered Jul 01 '17 at 05:38

Lepanto

1,413
1
8
15

@jumpman8947 That was minor. We generally don't see simple stuffs, rather think of bigger problem. All the best – Lepanto Jul 01 '17 at 05:47

score 0 · Answer 3 · answered Apr 26 '23 at 06:53

#HTM /PHP generation

<a class="openModal" data-id="<?php echo htmlentities($result->requestitem_item); ?>" data-toggle="modal" href="#myModal">

#Modal generation

    <!--Modal starts Here-->

<script>
  $('.openModal').click(function(){
      var id = $(this).attr('data-id');
      $.ajax({url:"modalajax.php?id="+id,cache:false,success:function(result){
          $(".modal-content").html(result);
      }});
  });
</script>
    
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>

<!--Modal ends Here-->

#modalajax.php

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
   <h2 class="modal-title">Issuing SERIAL No# to Items (<?php echo $ID ?>) </h2>
</div>
<form method="post" class="form-horizontal" enctype="multipart/form-data">
<div class="modal-body">

    <!-- Zero Configuration Table -->
    <div class="panel panel-default">
      <div class="panel-heading">Listed  Users</div>
        <div class="panel-body">
            <div style="overflow-x:auto;">
                <table id="zctb" class="display table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                  <thead>
                    <tr>
                             <th>ITEM NAME</th>                
                             <th>ITEM SERIAL#</th>               
                             <th>ITEM DEPARTMENT</th>
                             <th>ITEM CATEGORY</th>
                             <th>ITEM BRAND</th> 
                            </tr>
                  </thead>
                  <tbody>

<?php 
$sql = "SELECT * from  itemTABLE where itemTABLE_item ='$ID' " ;
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{       ?>  
            <tr>
         <td style="display:none;" ><input class="itemID"  name="itemID" class="form-control" value="<?php echo htmlentities($result->itemTABLE_id);?>" /></td>
         <td><?php echo htmlentities($result->itemTABLE_item);?></td>
         <td><input style="font-size:20px" type="text" name="itemserialno[]" class="itemserialno" value="<?php echo htmlentities($result->SERIAL_NUMBER);?>" required></td>
         <td><?php echo htmlentities($result->itemTABLE_department);?></td>

         <td><?php echo htmlentities($result->itemTABLE_category);?></td>
         <td><input style="font-size:20px" type="text" name="itembrand[]" class="itembrand" value="<?php echo htmlentities($result->SERIAL_NUMBER);?>" required>
            </tr>
                    <?php $cnt=$cnt+1; }
                  } else{
                      echo'
                      <tr>
                        <td colspan = "4"><center>Record Not Found</center></td>
                      </tr>';
                    } ?>
                    
                  </tbody>
                </table>
             </div>
         </div>
   </div>

      <div class="modal-footer">
        <button style="font-size:25px" type="submit" name="submitModifica" id="submit" class="btn btn-primary" value="submit">Save</button>
        <button style="font-size:25px" type="reset" id="cancelar" class="btn btn-danger" data-dismiss="modal" value="reset">Cancel</button>
      </div>
</div>
</form>

pass php variables to bootstrap modal from button click no ajax

3 Answers3