I have a div:

<div id="content"></div>

And when the page is loaded i call a .load(). This load takes around 10 minutes to finish and during the execution its PHP file return some information telling about the execution status, something like Linux loading. I want do put this information inside the div #content dynamically, but .load() is putting only at the end of the execution. Someone can help me please to do this?

The .load() call:

$("#content").load("/admin/ajax/analyse.php");

I have a div:

<div id="content"></div>

And when the page is loaded i call a .load(). This load takes around 10 minutes to finish and during the execution its PHP file return some information telling about the execution status, something like Linux loading. I want do put this information inside the div #content dynamically, but .load() is putting only at the end of the execution. Someone can help me please to do this?

The .load() call:

$("#content").load("/admin/ajax/analyse.php");

• javascript
• jquery
• html
• jquery-load

• 3 When you paste the same URL into a browser window, does it take 10 minutes? – Diodeus - James MacFarlane Commented Jan 18, 2013 at 22:02
• @Diodeus, Yes, it is a little heavy – Marcio Mazzucato Commented Jan 18, 2013 at 22:03
• 1 Then there's nothing you can do on the client-end to fix this. You need to re-factor how your server-side code works. – Diodeus - James MacFarlane Commented Jan 18, 2013 at 22:04
• 1 If you read here, api.jquery./load , you will see a function called "plete" documented. Put that function in the 3rd parameter on the call to 'load' and it will get called when the data is finished loading. The parameters will contain the data. Try some code and get back to us. – Lee Meador Commented Jan 18, 2013 at 22:05
• You should kick off a process and have other calls ping the server to get updates. You are not going to make a "websocket" with an http call. Maybe you should look into web sockets. ;) – epascarello Commented Jan 18, 2013 at 22:13

3 Answers 3

jQuery's ajax interface does not provide a way to get progress updates for a response (even though it claims to be a superset of the browser's native XMLHttpRequest object). Apparantly, such a use case is inconceivable to the jQuery developers:

No onreadystatechange mechanism is provided, however, since success, error, plete and statusCode cover all conceivable requirements.

By using the an XMLHttpRequest directly, you can read the current progress of a response in an onreadystatechange event handler:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/admin/ajax/analyse.php", true);
xhr.onreadystatechange = function receiveUpdate(e) {
    $("#content").html(this.responseText);
}
xhr.send();

This works in the latest versions of most browsers including IE 10, Chrome, and Firefox.

Demos:

• Send response continually for 10 minutes
• Pause several minutes between sending data over 15 minutes

There are a couple of ways to address this, but all of them will require server-side changes. One solution (which I think best fits how you are imagining this to work) is long polling.

See this quesiton on long polling with PHP and jQuery.

This is just an idea that you would have to flush out ...

On the server,

1. a user hits URL #1,
2. a session is started if there isn't one already.
3. start an asynchronous process generating the data.
4. as it gets some part of the data finished, it gets queued up. More simply said, it puts the data in chunks somewhere. Could be a database of a cache in memory.
5. When all the data is generated by the asynchronous task, it sends over an end-of-file indication by using some magic string.

On the server also:

1. the same user hits URL #2 (and you know from the session info)
2. you give him a chunk of the data from the front of the queue.
3. every time he hits URL #2 you give him some more data.
4. when the browser requests one last time and all that is left is the end-of-file indication, the server can return some HTTP result code indicating no more data or it can return the magic string.

On the client side,

1. do your ajax request against URL #1 to start the server generating.
2. issue requests against URL #2 repeatedly.
3. Every result gets appended to the page element so the user can see it as it arrives.
4. When the client request returns the 'no more data' result code (or the magic end-of-file string), it quits requesting more data and signals to the user, by putting something on the screen showing that all the data is there.

That should work for you.