Incremental Output - Jquery and PHP

Question

I have an application that rates a large set of items and outputs a score for each one.

In my php script I'm using ob_start and ob_flush to handle the output of data for each rating. This works great if I directly load the script. But when I try to use .get via jquery, the entire content loads and then is placed into a container, instead of incrementally adding.

I'm wondering the following

1. Is there a way to initiate data placement before the get has completed?
2. Do I need to continually poll the script until the process is complete?
3. Is there a more efficient way to display the data instead of get?

Answer 1

Jquery will receive a success status from the ajax call when the complete page has finished loading .. so whatever you do in the php will not get returned to the calling page until the whole process has finished .. (ajax is a one-send/one-receive system)

You would need to complicate your system to do what you want..

example..

1. your php updates an external file of progress, and your jquery polls this file in some interval and displays progress..
   You would initiate the interval polling on ajax submit, and on ajax success terminate it..

Answer 2

I had a similar problem awhile back where I wanted a php script to send a series of emails and update the jquery page to say something like "Sending 23/50".

What I ended up doing was setting up the php script to handle one item at a time. This might also work in your case. Could you have jquery pass an item identifier of some sort to a php script that handles just that one item? Then in the callback, you could place the data for that item in the page as well as creating a new ajax request for the next item. In other words, each callback would create a new request for the next item until the entire list of items has been looped through.

What do you think?

-DLH

Answer 3

For this kind of problems, I will have this approach:

1. Keep the old script that using ob_start() and ob_flush() for a user that disable javascript in their browser.
2. For a user that have javascript enable, load the predefined number content one at a time. To differentiate between js enable user and not, I'm thinking of 2 page. In first page you display a link to old script. Then put a jquery code in this page to intercept click on the link to old script, so click on that link will display (or create) a div, then load the content into that div.
3. You can use a setTimeout to call AJAX code continuously, then after a certain condition reached (Ex, empty response), you can remove the setTimeout using clearTimeout. Each AJAX request will need to have an offset param, so it will fetch content from last AJAX call. After receive response, increment the offset for the next AJAX call. You can use global variable for this.

4. You can use a simple global variable to prevent an AJAX request run while the last AJAX still waiting response, to prevent race condition. Example code:

   //lock variable
   var is_running = FALSE;
   //offset start with 0
   var offset = 0;
   function load_content($) {
     //check lock
     if (! is_running) {
       //lock
       is_running = true;
       //do AJAX
       $.get(URL,
         { PARAM },
         function(resp){
           //put data to 'div'
           //...
           //if empty, then call clearTimeout
           //...
           //increase offset here
           offset = offset + NUM_ITEM_FETCHED
           //release lock
           is_running = false;
         });
     }
   }

The point you must pay attention that using AJAX call, you must determine the response manually, since ob_start and ob_flush will have no effect in this scenario.

I hope this will help you create your own code.