Question

I was wondering if it would be possible to use jQuery’s ajax function to continually return a result to a page and update accordingly.

What I mean is this:
– User fires off a search
– jQuery uses ajax function to get the first 25 results and adds them to a table.
– While the user is looking at that list, jQuery keeps grabbing results 25 at a time and adding them to the table.

The idea behind this is, say your users search has 10,000 results. I would like to load them into a table that has paging controlled by Javascript so that we don’t have to go back to the server each time the user wants to go to the next page.
The time it takes a user to look at the first 25 results, we could probably have the next 50 loaded, which means we will have a very snappy looking interface with all the results.

Now there are definitely some downsides to this:
– the user can’t immediately go to “Last”
– the user can’t sort the table right away (or if they do they might immediately have a table that is not sorted correctly)

Still, I think this is an interesting idea and would love to try it out…but I have no idea where to begin.

How do you make the ajax function continue to run until a certain result happens? Can you add the results to a Table and have that table be continually changed without giving the user a bad interface experience?

Answer 1

JQuery provides callbacks for $.post, $.get and $.ajax. So, you can write a function to handle the input and keep feeding the function as the callback until the result sets are finished loading.

If the user does try the sort the table or jump down the results list, the table would need to reset and the next callback would need to detect the sort/paging change and send those variables to the server.

Something like this:

var page_number= 1;
var sort_by= 'column_name';
var sort_direction= 'asc';

function handle_result(data) {
  // Do something with the result/return data from the POST
  ....
  // $.post again . . . when there are more rows
  if (data.has_more_rows) {
    page_number++;
    $.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);
  }
}

// The initial post . . .
$.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);