Loading data via Ajax.load method blocking the cursor.

ajitjqdt26

I am using the datatabe.Ajax.url().Load() to refresh the data table in every 1 min. It is working fine but it is blocking the page to update anything during the Ajax call. Even during the Ajax call unable to enter anything to any field ..Looks like it is blocking the cursor till the Ajax request complete.

How to resolve the cursor blocking issue during the Ajax call.

Please help me.

Thanks,
Ajit

colin

Hi @ajitjqdt26 ,

I knocked out a silly example here that's trying to replicate slow Ajax responses, and while it's waiting, the table is still responsive. Would you be able to generate a test case please when you're seeing the blockage?

Cheers,

Colin

ajitjqdt26

Thanks Colin for the reply.

Actually I have data table in div and there are multiple form in another div in the same page. I am reloading the data table in every 1 min using the $interval and data table.ajax.url(new url).Load(). When the user is filling the form and in background when the Ajax call happening at that time the cursor is blocked till the Ajax response complete. So it is stopping the user to fill the form like entering text into text field or selecting drop down . User is not able to do anything during that Ajax call.

What my requirement is the data table should update in 1 minute intetval and at the same time user should be able to fill the form as that form is not part of the data table.

Is it possible or not? If yes then how to do. Please help.

Thanks & Regards,
Ajit Dash

kthorngren

cursor is blocked till the Ajax response complete

Do you have async: false as part of your ajax config options?

Maybe you can post a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I created one that might not be accurate but it does seem to work. You can interact with the form inputs while waiting for the ajax response from the ajax.reload(). I put a 5 second delay in the ajax response but the page interactivity still works.

You can also watch the console to see the order of the console.log output and when the ajax response is complete.

Here is the example:
http://live.datatables.net/pogevenu/1/edit

Feel free to update it to reflect your issue.

Kevin

ajitjqdt26

Thank you Kevin for your response.

I tried the approach you have mentioned above and come to know that actually ajax call is not blocking the cursor, the issue is because of the amount of data loading into the datatable.
I have around 1000 records and there is no pagination. So I believe the issue is because of at a time rendering the 1000 rows into datatable blocking the cursor for 2-3 sec.

I came to know because when I put settimeout around 5 sec then it worked and after 5 sec it hanged for 2-3 sec.

Could you please help how to resolve this issue.

Thanks & Regards,
Ajit Dash

colin

Hi @ajitjqdt26 ,

Yep, that'll do it - it's just the browser struggling to load those records. The thing to do here is only request the data that you need, so the record count will be decreased on the transfer and load. To that, use the deferRender.

Hope that helps,

Cheers,

Colin

ajitjqdt26

Thanks Colin.

If we use the deferRender option, will all the rows will render or only few rows.Why I am asking is we do not have pagination and want to display all rows at a time. This is the requirement we have.

Thanks & Regards,
Ajit Dash

colin

I think you may want to reconsider your design, or at least benchmark browser performance. Loading 1000 records into an unpaginated table is going to strain the browser.

The deferRender is for paginated tables generally, but it does work with the Scroller extension. This might be worth considering as an option.

Cheers,

Colin

ajitjqdt26

The issue resolved now by using deferRender and pagination.
Thank you Colin and Kevin for the help.

Thanks & Regards,
Ajit Dash