Delete button working only in first 10 row php

Question

The delete and edit button works only on the first 10 rows. This the program that I use. I can't figure it out.

This is the video of my problem: https://drive.google.com/file/d/1HRz3E4fcYRQhylWducFiqylwxK9Iy1Vl/view?usp=share_link

Below are the program that I am working on. When I am clicking the 11th row, it has no response even on console. It looks like the buttons have no functionality.

HTML

 <td>
    <button class="btn btn-success btn-sm edit btn-flat" data-id="<?php echo $row['empid']; ?>"> <i class="fa fa-edit"></i> Edit</button>

    <button class="btn btn-danger btn-sm delete btn-flat" data-id="<?php echo $row['empid']; ?>"> <i class="fa fa-trash"></i> Delete</button>
  </td>

<script>
$(function(){
  $('.edit').click(function(e){
    console.log("click edit")//DISPLAY IN CONSOLE
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

  $('.delete').click(function(e){
    console.log("click delete")//DISPLAY IN CONSOLE
    e.preventDefault();
    $('#delete').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

  $('.photo').click(function(e){
    e.preventDefault();
    var id = $(this).data('id');
    getRow(id);
  });

});

function getRow(id){
  $.ajax({
    type: 'POST',
    url: 'employee_row.php',
    data: {id:id},
    dataType: 'json',
    success: function(response){
      $('.empid').val(response.empid);
      $('.employee_id').html(response.employee_id);
      $('.del_employee_name').html(response.firstname+' '+response.lastname);
      $('#employee_name').html(response.firstname+' '+response.lastname);
      $('#edit_firstname').val(response.firstname);
      $('#edit_lastname').val(response.lastname);
      $('#edit_address').val(response.address);
      $('#datepicker_edit').val(response.birthdate);
      $('#edit_contact').val(response.contact_info);
      $('#gender_val').val(response.gender).html(response.gender);
      $('#position_val').val(response.position_id).html(response.description);
      $('#schedule_val').val(response.schedule_id).html(response.time_in+' - '+response.time_out);
      $('#edit_fingerprint').html(response.FingerprintID);
      $('#edit_status').val(response.status);

    }
  });
}
</script>

Please post a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Marc, Jan 04 '23 at 07:31
Maintaining a dynamic table element with `id`s is a nightmare. You should get rid of all the `id`s and [delegate](https://stackoverflow.com/q/203198/1169519) the events instead, and use the table structure and/or `event` object to get a reference to the needed elements. — Teemu, Jan 04 '23 at 07:32
I am not sure if this helps. But you may try this: `$("table").on("click", ".edit", function(){ etc...` ... This latebinds the event handler since the table rows seems to be generated dynamically — Gowire, Jan 04 '23 at 07:33
@Gowire It does not help since the html code is generated on the server side with php, ergo, all DOM elements are there when the browser loads the js code. — Marc, Jan 04 '23 at 07:36
@Marc Event delegation definitely will help. It looks like the elements are heavily modified in JS, and new elements are created in `getRow` (`.html(...)` creates new elements). — Teemu, Jan 04 '23 at 07:40
@Teemu .html() only creates new elements if you pass html into it. In this case strings are almost certainly passed in, so it'll set the innerHTML of the selected element, but just to some text. It getRow certainly isn't creating new edit or delete buttons to bind to, from what I can see — ADyson, Jan 04 '23 at 08:25
By any chance was the 11th row onwards added by an AJAX call, or some other JavaScript, which may have executed after the `$('.delete').click` code was run? If you only add the buttons after the event handler was set up, then obviously it won't handle events on buttons which didn't exist at the time it was configured. You haven't shown how any of the buttons are generated — ADyson, Jan 04 '23 at 08:33
@ADyson Falling back to event delegation to fix the issue you mentioned in your last comment = ). — Teemu, Jan 04 '23 at 08:51
Yes I did. It looks like actually you are using a paged table. It would make sense if you had shown us how you are doing that, with code - we do expect a [mre] of the issue in your question, more than a video. But therefore, it's likely the buttons on the second page are hidden and are not part of the DOM when you are binding the "click" event handlers. You should use event delegation as we've suggested above, so that you bind to a parent element which is already there, and delegate down to any "edit" or "delete" buttons which happen to be within that when the click happens. That will solve it — ADyson, Jan 04 '23 at 10:56
https://learn.jquery.com/events/event-delegation/, https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on — ADyson, Jan 04 '23 at 11:06

score -2 · Answer 1 · answered Jan 04 '23 at 07:22

-2

Update your edit and delete event handler like below.

$('.edit').on('click', function(e){});

$('.delete').on('click', function(e){});

answered Jan 04 '23 at 07:22

Mufasil

303
1
4
16

It does the exact same: "Bind an event handler to the "click" JavaScript event, or trigger that event on an element." https://api.jquery.com/click/ – Marc Jan 04 '23 at 07:25
so that means that the proposed solution will not work too? – techguy Jan 04 '23 at 07:26
@techguy No. Thats absolutely useless and not a real answer. – Marc Jan 04 '23 at 07:27
@Marc the `on` event manages dynamic contents as well, i.e. it binds events to elements that are created after document has been loaded. Or so I've heard... ? – Gowire Jan 04 '23 at 07:28
I tried, still not working. Thank you for your response! – techguy Jan 04 '23 at 07:28
@techguy in order to handle elements generated by javascript we have to use delegate function i.e .on() – Mufasil Jan 04 '23 at 07:29
@Mufasil When you watch the video, you see the rows/buttons are generated with php and not on the client side. Your "answer" is complete useless and dosnt even work as op said. – Marc Jan 04 '23 at 07:32
@Marc I think he is using Data Table which loads the data and elements through jquery. – Mufasil Jan 04 '23 at 07:34
1

@Mufasil Why do you think so and where did he said that? – Marc Jan 04 '23 at 07:36
1

@Mufasil .on by itself doesn't automatically do delegtion. You have to provide an extra selector as the parent, and then a selector to delegate to. That's shown in the jquery .on documentation, you might want to take a look at it more carefully. Go to https://api.jquery.com/on/ and read the section called "delegated event handlers" – ADyson Jan 04 '23 at 08:21

Delete button working only in first 10 row php

1 Answers1