CODEWITHSUNDEEP
javascriptjquerytabulator
Ben Kim
Ben Kim

Reputation: 21

Tabulator Ajax Response Blocked - setFilter

I have Tabulator nearly working as I need for a web application I am designing. This app is calling web services in a backend app written in Java.

I created an InitialFilter set, the filtering, sorting, and pagination is handled by the backend. Next, I am creating an Accordion control for the various filter inputs by the end-user. No issues yet. I created two buttons, one to Apply the filter based on the user preferences, and another to Reset/Clear the filter parameters.

The Tabulator object is already created and has the default data already showing on the page. When the user sets the custom filter and clicks the Apply button, a JQuery function captures the on-click event and executes the following code.

$(function(){
    $('#btn-apply').on('click', function(e){
        // handle click event of button
    
        // Get values first
        var subFrom = $('#txt-submission-from').val();
        var subTo = $('#txt-submission-to').val();

        // Set filters
        NIBRSTable.clearFilter();
    
        NIBRSTable.addFilter("submissionPeriod", ">=", subFrom);
        NIBRSTable.addFilter("submissionPeriod", "<=", subTo);
    
        // Call function to load data
        NIBRSTable.setData();
    });
});

Error Returned

Ajax Response Blocked - An active ajax request was blocked by an attempt to change table data while the request was being made tabulator.min.js:5:24222

I have tried commenting out one source line at a time. It appears the setFilter() calls are causing the Ajax Response Blocked error even though there is not anything actively occurring (the tabulator DOM is already loaded) I have many more items for which the end-user may filter. The two filters shown in the code listing above are just a start.

Upvotes: 1

Views: 1733

Answers (2)

Ben Kim
Ben Kim

Reputation: 21

Oli,

Thank you for the detailed response. Since the filters are dynamic and set by the end-user (i.e. cannot be hardcoded), I created an Object and conditionally adding the filter parameters. Using this object, I can call the NIBRSTable.addFilter(userFilter) and it works like a charm! I did make the mistake of trying to JSON Stringify the object and passing it to the addFilter method, but quickly learned JSON Stringify was unnecessary since the object array was already a JSON object.

Oddly, though I am still receiving a single warning "Ajax Response Blocked" even though there were no pending Ajax actions. I only have one .addFilter() and removed the .setData() as you responded. I will ignore for now since the filtering is working!

Ben

Upvotes: 0

Oli Folkerd
Oli Folkerd

Reputation: 8348

That isn't an error message, that is just a console warning.

What it means is that multiple ajax requests have been made in quick succession and that one request has been made before the first one returned, therefore the response of the first request will be ignored so the table isn't partially redrawn.

In this case it is being triggered because you are calling the addFilter function twice in quick succession which is triggering the ajax request twice with the second filter being added before the first ajax request has been sent. (there is also no need to call the setData function, adding a filter when ajaxFiltering is enabled will automatically trigger the request).

To avoid this double ajax request you could pass an array of filter objects into the addFilter function and only call it once:

NIBRSTable.addFilter([
    {
        field:"submissionPeriod", 
        type:">=", 
        value:subFrom
    },
    {
        field:"submissionPeriod", 
        type:"<=", 
        value:subTo
    },
]);

Upvotes: 2

Related Questions