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

«13

Answers

  • allanallan Posts: 54,572Questions: 1Answers: 8,534 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: 54,572Questions: 1Answers: 8,534 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: 54,572Questions: 1Answers: 8,534 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: 13,606Questions: 25Answers: 3,204

    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: 3,095Questions: 24Answers: 363

    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: 21Questions: 3Answers: 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: 13,606Questions: 25Answers: 3,204

    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: 13,606Questions: 25Answers: 3,204

    @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: 13,606Questions: 25Answers: 3,204

    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

  • cthompsoncthompson Posts: 24Questions: 0Answers: 0

    What if the datatable is in a sub page? How would I reference this.

    $('#siteTable3').DataTable().ajax.reload(); doesn't reload the data in the sub page as I am calling from the parent. Any thoughts?

  • kthorngrenkthorngren Posts: 13,606Questions: 25Answers: 3,204

    @cthompson Is it because the table with the id siteTable3 is not in the DOM when you use $('#siteTable3').DataTable().ajax.reload();? Maybe you need to call it when the sub page is opened. You can use $.fn.dataTable.isDataTable() to determine if the Datatable exists and if so use $('#siteTable3').DataTable().ajax.reload();.

    If this doesn't help please create a new thread with your question and hopefully a test case to show us what you are doing.

    Kevin

  • cthompsoncthompson Posts: 24Questions: 0Answers: 0
    edited December 2020

    The sub page is already open in the tab. Records provide a button to change data. I want the updated data to show in the sub page after the update (using ajax) completes. the page is home.php.

    There's a LOT of code so it would be hard to show/explain.

    I'd be happy with any solution that just makes that page completely reload.

  • kthorngrenkthorngren Posts: 13,606Questions: 25Answers: 3,204

    $('#siteTable3').DataTable().ajax.reload(); doesn't reload the data in the sub page

    Do you get errors in the browser's console? What exactly happens? Does the browser's network inspector show the XHR request?

    You can use something like $('#siteTable3').size() to see if the element is being found.

    I want the updated data to show in the sub page after the update (using ajax) completes.

    If you are using ajax then you can use the xhr event to $('#siteTable3').DataTable().ajax.reload();. If using jQuery ajax() you can use the success function.

    There's a LOT of code so it would be hard to show/explain.

    We ask for test cases so we can see the code running to get an understanding of whats gong on.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • cthompsoncthompson Posts: 24Questions: 0Answers: 0

    The ajax succeeds... the page just won't reload.

Sign In or Register to comment.