jquery function doesn't work on second page of table

Question

I am currently making a table with data coming from a database via sql and i am generating each row with the following code:

<tbody>
<?php
foreach($merchants as $merchant) {
   echo '<tr>';
   echo '<td>' . $merchant['id'] . '</td>';
   echo '<td>' . $merchant['name'] . '</td>';
   if ($userIsAdmin){
       echo '<td>' . date("d.m.Y" , strtotime($merchant['import_date'])) . '</td>';
       echo '<td>' . $merchant['import_from'] . '</td>';
   }
   echo '<td>' . $merchant['number_keys'] . '</td>';
   if ($userIsAdmin){
       echo '<td><a class="merchantDelete" href="#" data-id="' . $merchant['id'] . '" data-toggle="modal" data-target="#deleteMerchantModal">
             <i class="fas fa-times"></i></a>
             <a class="merchantEdit" href="#" data-name="' . $merchant['name'] . '" data-hidden="' . $merchant['id'] . '" data-toggle="modal" data-target="#editMerchantModal">
             <i class="far fa-edit"></i></a><input type="text" value="' . $merchant['id'] . '" hidden></td>';
    }
    echo '</tr>';
}
?>
</tbody>

The elements with class merchantDelete and merchantEdit are buttons to delete or edit data in the database. The modals are to check what data should be edited and what should be deleted. I am using data-xxx to pass the data needed to the following modal.(I am only showing 1 modal because the principle is the same)

<div class="modal fade" id="editMerchantModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel">Edit Merchant</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
             </div>
             <form method="POST" action="action_merchants.php<?php echo '?location=' . $_SERVER['REQUEST_URI']; ?>">
                 <div class="modal-body">
                     <input type="hidden" name="action2" value="edit">
                     <div class="form-row">
                         <div class="col-4">
                             <div class="form-group">
                                 <input type="hidden" class="form-control" name="hidden" id="modal_hidden" value="">
                             </div>
                             <label for="select_m" class="col-form lable">Curent Name:</label>
                             <input type="text" class="form-control" name="select" id="select_m" disabled>
                             <label for="new_name" class="col-form lable">New Name:</label>
                             <input type="text" class="form-control" name="new_name" id="new_name"
                          </div>
                       </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary form-control" id="new_merchants_submit" value="Edit">
                    </div>
              </form>
         </div>
    </div>
</div>

Now i am passing the previously mentioned values to the modal with this jquery function:

<script>
    $(function () {
        $(".merchantEdit").click(function () {
            var name_value = $(this).data('name');
            var hidden_value = $(this).data('hidden');
            $('#select_m').val(name_value);
            $('#modal_hidden').val(hidden_value);
            $('#new_name').val(name_value);
        });
    });
</script>

This works how it should, however only on the first page of my table. I am using ajax to change page. Now the problem is that the function doesnt ever run when i am on the second page, even tho the elements .merchantEdit and .merchantDelete have the correct data-values.

I have been researching for a while now, but i couldn't get it to work. I would apreciate any help i could get.

Thanks,

Matt.S

score 0 · Accepted Answer · answered Oct 23 '18 at 08:42

0

This is because the click is listening for the elements already rendered to the DOM, Try using

$(document).on("click",".merchantEdit",function() {
        var name_value = $(this).data('name');
        var hidden_value = $(this).data('hidden');
        $('#select_m').val(name_value);
        $('#modal_hidden').val(hidden_value);
        $('#new_name').val(name_value);
 });

answered Oct 23 '18 at 08:42

DevDwarf

166
4

Thanks. this worked perfectly. – Matt.S Oct 23 '18 at 09:43

jquery function doesn't work on second page of table

1 Answers1