How to enable functionality for dynamically, auto-generated buttons in php?

Question

In a PHP file, via the ajax technique, I'm generating tables based on data from a database as shown in the following snippet:

$i = 0;

echo $dayOfWeek;
echo "<table>
<tr>
<th>Name</th>
<th>Expected Time</th>
<th>Start Time</th>
<th>End Time</th>
<th>Auto</th>
</tr>";  
while ($r = $q->fetch_assoc()) {

  $schedule = $r['schedule'];
  $sch_arr = json_decode($schedule)->schedule;

  foreach ($sch_arr as $entry) {
    $day = $entry->Day;
    if ($day == $dayOfWeek) {
      echo "<tr>";
      echo "<td>" . $r['employee_name'] . "</td>";
      $stime = $entry->{'Start Time'};
      $etime = $entry->{'End Time'};
      $expected = $stime.'-'.$etime;
      echo "<td id='exptime_".$i."'>" . $expected . "</td>";
      echo "<td><input type='text' id='stime_".$i."' name='stime_'></td>";
      echo "<td><input type='text' id='etime_".$i."' name='etime_'></td>";
      echo "<td><input type='text' id='notes_".$i."' name='notes_'></td>";
      echo "<td><button type='submit' id='autofill_".$i."'> Autofill </button></td>";
      echo "</tr>";
      echo "<tr><th colspan='8'><br/><hr width='100%'></th><tr>";
      $i++;
    }
  }
}
echo "</table>";

I want the generated Autofill buttons to have functionality based on this:

<script>
$(document).ready(function() {
  $("#autofill").click(function(){
    var exp = document.getElementById("expected").innerHTML;
    var myArray = exp.split("-");
    document.getElementById("stime").value = myArray[0];
    document.getElementById("etime").value = myArray[1];
  });
});
</script>

So I attempted to convert that javascript code into html as shown below:

echo "<script>";
echo "\$(document).ready(function() {";

foreach (range(0, $i) as $int) {
    echo   "\$('#autofill_".$int."').click(function(){";
    echo     "var exp = document.getElementById('exptime_".$int."').innerHTML;";
    echo     "var myArray = exp.split('-');";
    echo     "document.getElementById('stime_".$int."').value = myArray[0];";
    echo     "document.getElementById('etime_".$int."').value = myArray[1];";
    echo   "});";
}

echo "});";
echo "</script>";

But the Autofill buttons functionality doesn't work. I escaped the $ thinking that may have been the issue. How can I auto generate javascript functions dynamically? Or perhaps there is a better way to enable functionality for dynamically generated buttons?

Declan McKelvey-Hembree · Accepted Answer · 2022-09-07T22:32:57.813

Your first approach is much cleaner, the problem is just that your buttons have ids autofill_0, autofill_1, autofill_2, etc., and you're looking for a single button with id autofill. I'd instead make an autofill class for all your autofill buttons, and stime, etime, and notes classes for the inputs, so that each tr looks something like this:

  <tr>
    <td class="expected">XXXX-YYYY</td>
    <td><input type='text' class="stime" name='stime_X'></td>
    <td><input type='text' class="etime" name='etime_X'></td>
    <td><input type='text' class="notes" name='notes_X'></td>
    <td><button type="button" class="autofill">Autofill</button></td>
  </tr>

Then have a script like so, that traverses the HTML document structure looking for those adjacent classes:

$(document).ready(function() {
  $(".autofill").click(function(e){
    var rowParent = $(e.target).parent().parent();
    var exp = rowParent.find('.expected').text();
    var myArray = exp.split("-");
    rowParent.find(".stime").val(myArray[0]);
    rowParent.find(".etime").val(myArray[1]);
  });
});

I tried inserting the function script along with the table insertion, but inserted functions don't register correctly. And having the function script in the original php page doesn't work as intended because the inserted tables are registered afterwards... I think that's why it doesn't work. Not sure where best to implement the function script. — Rinku27, Sep 09 '22 at 22:00
Update: I placed the function you provided inside the original/initial php file, then used mjs code here (https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) to re-apply your function to the ajax inserted buttons. — Rinku27, Sep 12 '22 at 03:20

How to enable functionality for dynamically, auto-generated buttons in php?

1 Answers1