By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,117 Members | 1,714 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,117 IT Pros & Developers. It's quick & easy.

Ajax Requests during Filtering/Paging and UI Responsiveness

Frinavale
Expert Mod 5K+
P: 9,731
Hi,

I am currently working on a feature that allows people to page and filter search results down based on search criteria entered.

To accomplish this I am calling a function called "RefreshSearchResults" during keyup, click, and change events (for textboxes, checkboxes and select elements). This method uses Ajax to request new search results based on what was provided by the user (whether that be paging or search criteria restrictions).

Sometimes, depending on the data set involved, the server process is slower than the ajax requests which ends up making the search results appear as if they are "locked up" in my browser.

For example, if I start filtering student objects based name and start typing "frinny" an ajax request is sent up to filter on "f" then "fr" then "frin" etc.

If the results didn't return from the "f" and I do a bunch of things that cause ajax requests, my search results section of the page appear as if they are always updating (because I'm showing a "loading" message over them) since the number of requests is taking a while to process.

I was thinking of implementing a solution that prevents ajax requests from being sent if one is already in progress....and if there were any changes between the start of the ajax request to when it finished I would start a new request.

But, I'm not sure if this is the best approach and was hoping to hear back from the JavaScript experts about the best techniques to use to avoid UI lockup like I'm experiencing.

Thanks,

-Frinny
Jan 30 '14 #1
Share this Question
Share on Google+
5 Replies


Rabbit
Expert Mod 10K+
P: 12,359
What about going with just the most recent request? Can you cancel both the client side request and the server side script?
Jan 31 '14 #2

Dormilich
Expert Mod 5K+
P: 8,639
cancelling the AJAX request from JS: XMLHttpRequest.abort().

cancelling the AJAX request from the server: depends whether your server language can manage multiple incoming requests (or rather, can do something with request 1 if a certain condition on request 2 occurs). probably the easiest would be aborting the server process on request 1 and sending a HTTP 206 (no content).

EDIT: besides that, why does your AJAX locks up the UI? asynchronous calls were made esp. to not lock up the script execution.
Jan 31 '14 #3

Frinavale
Expert Mod 5K+
P: 9,731
It isn't "locked up" but rather the section that is being updated is constantly stating that it is "loading" while it waits for requests to come back.

I'm going to look into whether or not I can cancel the request server-side and what it would take to do that.

Thanks for the suggestions!

-Frinny
Jan 31 '14 #4

Dormilich
Expert Mod 5K+
P: 8,639
It isn't "locked up" but rather the section that is being updated is constantly stating that it is "loading" while it waits for requests to come back.
if you abort from JS, you can just end the "loading" manually.
Jan 31 '14 #5

Frinavale
Expert Mod 5K+
P: 9,731
I changed the code so that only one ajax request for filtering/paging is used at a given time.

If the RefreshSearchResults is currently processing a request it doesn't make a new ajax request and instead increments a counter for the number of changes made. In the completed event I create a new ajax request if the count is greater than 0; otherwise I hide the "updating" indicator.

It is smoother and there are lest requests sent to the server now (especially if the server takes a while with the result set).

-Frinny
Jan 31 '14 #6

Post your reply

Sign in to post your reply or Sign up for a free account.