Reload Table (NOT Datatable()) after jQuery/Ajax success

Question

I know this topic has been covered multiple times as i've searched and tried many options before posting this so please don't close it.

I have a table that shows shift entries from my mysql database. After I delete a row using jQuery I would like the totals row to be refreshed upon success, or the whole table itself.

The issue im experiencing is that the delete and reload process works but it only works once and not multiple times.

Can anyone help?

My table:

<table id="cardTable">
  <tr>
    <td>Mon</td>
    <td>11:00 hrs</td>
    <td>£185.00</td>
  </tr>
  <tr>
    <td>Tue</td>
    <td>11:00 hrs</td>
    <td>£100.00</td>
  </tr>
  <tr>
    <td>Wed</td>
    <td>11:00 hrs</td>
    <td>£100.00</td>
  </tr>
  <tr>
    <th>Totals:</th>
    <th>33:00 hrs</th>
    <th>£300.00</th>
  </tr>
</table>

The jQuery:

$(document).ready(function(){

    // Delete 
    $('.delete').click(function(){

        var el = this;
        var id = this.id;
        var splitid = id.split("_");

        // Delete id
        var deleteid = splitid[1];

        // AJAX Request
        $.ajax({
            url: 'system/actions/deleteShift.php',
            type: 'POST',
            data: { id:deleteid },
            success: function(response){

                if(response == 1){
                    // Remove row from HTML Table
                    $(el).closest('tr').fadeOut(600,function(){
                        $(this).remove();
                    });
                    $("#cardTable").reload(" #cardTable");
                }
                else {
                    alert('Invalid ID.');
                }

            }
        });

    });

});

So replace $('.delete').click(function(){ with $('.delete').on(function(){ ?? — Toe-neeeeee, Jun 04 '20 at 20:13
Yes. After the first delete, the DOM has changed and so you likely need to consider how to bind to dynamic elements. Read more here: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — devlin carnate, Jun 04 '20 at 20:17

score 0 · Answer 1 · answered Jun 04 '20 at 20:21

I am not sure if it's it pretty, you can try to put everything in a function and reinitialize it after a successfull ajax.

$(document).ready(function(){

    initClicks();
    function initClicks() {
        // Delete 
        $('.delete').unbind().click(function(){

            var el = this;
            var id = this.id;
            var splitid = id.split("_");

            // Delete id
            var deleteid = splitid[1];

            // AJAX Request
            $.ajax({
                url: 'system/actions/deleteShift.php',
                type: 'POST',
                data: { id:deleteid },
                success: function(response){

                    if(response == 1){
                        // Remove row from HTML Table
                        $(el).closest('tr').fadeOut(600,function(){
                            $(this).remove();
                        });
                        $("#cardTable").reload(" #cardTable");
                        initClicks();
                    }
                    else {
                        alert('Invalid ID.');
                    }

                }
            });

        });
    }
});

Thanks @Beryth i've tried to do this but unfortunately it doesnt work.. I'm a novice when it comes to JS so am struggling to piece this together. — Toe-neeeeee, Jun 04 '20 at 20:32

Reload Table (NOT Datatable()) after jQuery/Ajax success

1 Answers1