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

Rinku27 0
Viewed 35

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?

php javascript html
1 Answers

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]);
  });
});
Declan McKelvey-Hembree0
Related