Reload/refresh table after event

Reload/refresh table after event

necnec Posts: 4Questions: 2Answers: 0
edited November 2016 in Free community support

I am trying to reload the table but I can't seem to find the way to call the reload function.
In the .done function of the 'revoke' event is where I'm trying to call it $(document).on("click", '.revoke', function (event).
Here is how I'm calling it but fails: $('#example').data.reload(); or table.reload(); or table.ajax.reload();
Any ideas?

<script>
    $(document).ready(function () {
       var thedata = GetPermissions();

        var table = $('#example').DataTable({
            data: jQuery.parseJSON(thedata),
            columns: [
                { data: 'Professional' },
                { data: 'Patient' },
                {
                    data: "View",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Edit",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Insert",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Delete",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Revoke",
                    render: function (data, type, row) {                     
                            return '<input type="button" class="btn btn-danger btn-xs revoke" data-pro="' + row.ProfessionalID + '" data-pat="' + row.PatientID + '" name="revoke" value="Revoke">';
                     }
                }
            ]
        });

        $(document).on("click", '.revoke', function (event) {
            var sf = $.ServicesFramework(<%=ModuleId %>);
                var serviceUrl = sf.getServiceRoot('omnibody');
                var revoke = { 'ProfessionalID': $(this).data('pro'), 'PatientID': $(this).data('pat') };

                $.ajax({
                    type: "POST",
                    cache: false,
                    url: serviceUrl + "/ModuleTask/RevokeAccessRights",
                    beforeSend: sf.setModuleHeaders,
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(revoke)
                }).done(function (result) {
//PROBLEM IS HERE
                    // $('#example').data.reload();
                    table.reload();
                }).fail(function (xhr, result, status) {
                    alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
                });
            });
    });
    
    function GetPermissions() {
        var sf = $.ServicesFramework(<%=ModuleId %>);
        var serviceUrl = sf.getServiceRoot('omnibody');
        var jdata;
        $.ajax({
            type: "GET",
            cache: false,
            async: false,
            url: serviceUrl + "/ModuleTask/GetAccessRightsPivoted",
            beforeSend: sf.setModuleHeaders,
            contentType: "application/json; charset=utf-8"
        }).done(function (result) {
            jdata = result;
            return jdata;
        }).fail(function (xhr, result, status) {
            alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
        });
        return jdata;
    }
</script>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 52,836Questions: 1Answers: 8,106 Site admin

    table.ajax.reload();

    This is the correct one.

    When you do that, what happens? Any errors or messages shown on the console?

    $('#example').data.reload();

    Won't work because data.reload() is not a jQuery function. ajax.reload() is specific to the DataTables API.

    table.reload();

    Won't work because there is no top level reload() method in DataTables.

    Allan

  • necnec Posts: 4Questions: 2Answers: 0

    When I use table.ajax.reload();
    I get an error: Uncaught ReferenceError: table is not defined

    Please also note the highlights in the Console (debug) (image attached)

  • allanallan Posts: 52,836Questions: 1Answers: 8,106 Site admin
    Answer ✓

    It looks like it should be defined from the above.

    You could try $('#example').DataTable().ajax.reload();.

    Allan

  • necnec Posts: 4Questions: 2Answers: 0

    Works with the last suggestion. Great stuff.

  • jcaceli@e-dswd.netjcaceli@e-dswd.net Posts: 1Questions: 0Answers: 0

    thanks it works ..

    $('#example').DataTable().ajax.reload();

  • latshalatsha Posts: 1Questions: 0Answers: 0

    Is it possible to add some parameters when reloading data?

  • allanallan Posts: 52,836Questions: 1Answers: 8,106 Site admin

    Use ajax.data to control the parameters sent to the server during an Ajax request by DataTables.

    Allan

  • joshadojoshado Posts: 1Questions: 0Answers: 0

    Thanks!

  • EdathadanEdathadan Posts: 1Questions: 0Answers: 0

    $('#example').DataTable().ajax.reload(); works, thanks

  • suhailvssuhailvs Posts: 1Questions: 0Answers: 0

    $('#example').DataTable().ajax.reload(); works like charm in Angular6 application. I used https://l-lin.github.io/angular-datatables/

  • jahnelgroupjahnelgroup Posts: 6Questions: 1Answers: 0

    What if our data isn't ajax? I get JSON Invalid error when using this. And this.table.draw() will "redraw" but sorting still doesn't work til I reload the page manually.

  • kthorngrenkthorngren Posts: 11,033Questions: 25Answers: 2,527

    What if our data isn't ajax? I get JSON Invalid error when using this.

    ajax.reload() is for ajax loaded data. How is your data sourced?

    And this.table.draw() will "redraw" but sorting still doesn't work til I reload the page manually.

    Sounds like the issue you are trying to resolve is different than this thread. I would suggest creating a new thread describing the issue you are having and posting relevant code.

    Kevin

  • jahnelgroupjahnelgroup Posts: 6Questions: 1Answers: 0

    @kthorngren You're correct. I have done so.

  • martinpfengmartinpfeng Posts: 3Questions: 0Answers: 0

    Thanks Allan. This works for me:

    $('#example').DataTable().ajax.reload();
    
  • fotosvinadelmarfotosvinadelmar Posts: 19Questions: 2Answers: 1

    this is working correctly, thanks

    $('#example').DataTable().ajax.reload();

  • LokeshwariLokeshwari Posts: 16Questions: 3Answers: 0

    Im getting below error if i use $('#example').DataTable().ajax.reload();
    DataTables warning: table id=tblClients - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1.
    any help?

  • tangerinetangerine Posts: 2,817Questions: 22Answers: 330

    please see http://datatables.net/tn/1.

    The help is provided in that link. Did you follow the diagnostic steps explained there?

  • toot27toot27 Posts: 1Questions: 0Answers: 0

    I was looking for the best way to reload and this worked perfectly
    $('#example').DataTable().ajax.reload();
    and table holds filters used so the whole table is not loaded from scratch

  • aziegler3aziegler3 Posts: 10Questions: 1Answers: 0

    $('#example').DataTable().ajax.reload(); did not work for me.
    But table.ajax.reload(); worked perfectly. I cannot explain why.

  • WeiBWeiB Posts: 1Questions: 0Answers: 0

    same for me it is not working error in JSON
    https://datatables.net/tn/1

  • kthorngrenkthorngren Posts: 11,033Questions: 25Answers: 2,527

    Did you follow the troubleshooting steps provided in the URL?
    http://datatables.net/tn/1.

    What did you find?

    Kevin

  • tylerdurden83tylerdurden83 Posts: 4Questions: 0Answers: 0

    My issue with table.ajax.reload(); is that calling it in the success callback of the ajax delete call triggers a server side refresh that might go wrong due to a race condition (sometimes under some circumstances the refresh still receives the deleted row), that's why I wanted to call row.remove without a refresh, but it seems it can't be done....

  • kthorngrenkthorngren Posts: 11,033Questions: 25Answers: 2,527

    @tylerdurden83 Why is there a race condition? If you are using a jQuery Ajax call the success condition will only be called when the server script responds. Presumably the response take place only after the row is deleted so the reloaded data shouldn't have the deleted row.

    I wanted to call row.remove without a refresh, but it seems it can't be done....

    row().remove() will only remove the row from the table not from the server side database.

    Maybe you can provide a link to your page or a test case so we can take a look.

    Kevin

  • tylerdurden83tylerdurden83 Posts: 4Questions: 0Answers: 0

    @kthorngren Thanks for helping me. I'll try to add a bit more details. I'm using Play Framework and this page has worked for a number of years. Now I finally had some time to update to the last version of Play and in the process have upgraded all API to return a CompletionStage (Future) or a Result, not sure if it has something to do with it, but that's when I started to notice that after a ajax call to DELETE, in the success callback I'd call table.ajax.reload, and the deleted row was sometimes still returned from the backend, even though on the database it was gone. Adding a setTimeout in the success callback to fire the ajax reload a second after, this weird situation never happens anymore.

    About the row().remove(), since I didn't really need a server side refresh of the whole table what I first did was that just remove from the displayed ones the row that was deleted, commenting out the server side reload altogether. I removed the ajax.reload and replaced it with a table.row.remove(id).draw, but the table would be redrawn still with the deleted row. I read in a comment from allan posted a while ago that this is because table.row.remove(id).draw is ignored if server side loading is enabled for the table.

  • kthorngrenkthorngren Posts: 11,033Questions: 25Answers: 2,527

    allan posted a while ago that this is because table.row.remove(id).draw is ignored if server side loading is enabled for the table.

    Not sure that it is ignored, the remove should still be processed. But the draw() will fetch the current page from the server side script. Since the delete is only in the client but the server script is returning what is in the DB the deleted row returns.

    after a ajax call to DELETE, in the success callback I'd call table.ajax.reload, and the deleted row was sometimes still returned from the backend

    Your server script would need to be investigated. Sounds like it is returning a response before the deletion is complete.

    Kevin

Sign In or Register to comment.