1

Having an issue with ajax modals with dynamic data.

I query a database and get information which is used to create href links like this in a loop as:

*<a href="#" data-href="ajax.php?id=<?php echo $myprodid; ?>" id="myprodbtn"> 
<i class="bi-eye"></i>
</a>*

html generated by the loop:

*<div class="prod-cards-icons">
   <a href="#" data-href="ajax.php?id=1" id="myprodbtn"> 
     <i class="bi-eye"></i>
   </a>     
</div>
<div class="prod-cards-icons">
   <a href="#" data-href="ajax.php?id=2" id="myprodbtn"> 
     <i class="bi-eye"></i>
   </a>
</div>  
<div class="prod-cards-icons">
   <a href="#" data-href="ajax.php?id=3" id="myprodbtn"> 
     <i class="bi-eye"></i>
   </a>     
</div>*

Javascript function:

*$(document).ready(function(){
  $('#myprodbtn').on('click',function(){
     var dataURL = $(this).attr('data-href');
     $('.modal-body').load(dataURL,function(){
        $('#myprod').modal({show:true});
     });
  }); 
}); /* end document.ready */*

Currently I'm just echoing back the "id" data, so the ajax.php file contains:

*<?php
$prodid = $_GET['id'];
echo $prodid;
exit;
?>*

The modal php file contains:

*<div class="modal" id="myprod" tabindex="-1" role="dialog" aria-labelledby="myprod" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="<?php echo TEXT_MODAL_CLOSE; ?>" style="color:#ffffff;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer" style="border:none;">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo TEXT_MODAL_CLOSE; ?></button>
      </div>
    </div>
  </div>*

The problem is that the modal only displays for "id=1", the modal never displays for any other id. This is my first foray into modals, so am sure I've done something wrong, would appreciate any assistance.

Loren P
  • 11
  • 1
  • ids are supposed to be unique in your html file. You should try to echo `myprodid` to make them unique. I think that if they have the same id, only the first one will respond to your click event – Fiouze Jan 13 '21 at 23:07
  • use `class="myprodbtn"` instead of `id="myprodbtn"` and change your selector like : `$('#myprodbtn')` to `$('.myprodbtn')` – Swati Jan 14 '21 at 04:12

2 Answers2

0

Swati's suggestion fixed the issue. Changed the PHP in the loop to:

<a href="#" data-href="tpl_product_info_ajax.php?id=<?php echo $myprodid; ?>" class="myprodbtn"> 
<i class="bi-eye"></i>
</a>

Changed the Javascript to:

$('.myprodbtn').on('click',function(){
     var dataURL = $(this).attr('data-href');
     $('.modal-body').load(dataURL,function(){
        $('#myprod').modal({show:true});
     });
});
Loren P
  • 11
  • 1
-1
$queryWorkOrder = "SELECT CONVERT(varchar, c.t_rdld, 100) as startdate, cast (d.t_text  AS varchar(5000)) as WO_Number

I need to solve this problem since the query does not work and result can appear in modal

qqqqqql
  • 1
  • 1
  • But this is completely unrelated to the question. Even the citation. Is this GPT3 generated? Or did you paste an answer to the wrong question? – chrslg Dec 22 '22 at 09:56