2

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");
hohner
  • 11,498
  • 8
  • 49
  • 84
Marcio Mazzucato
  • 8,841
  • 9
  • 64
  • 79
  • 3
    When you paste the same URL into a browser window, does it take 10 minutes? – Diodeus - James MacFarlane Jan 18 '13 at 22:02
  • @Diodeus, Yes, it is a little heavy – Marcio Mazzucato Jan 18 '13 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 Jan 18 '13 at 22:04
  • 1
    If you read here, http://api.jquery.com/load/ , you will see a function called "complete" 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 Jan 18 '13 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 Jan 18 '13 at 22:13
  • @LeeMeador, I want to put the output dynamically, before the end of the execution – Marcio Mazzucato Jan 18 '13 at 22:13
  • @LeeMeador You are missing the point. The OP wants to stream data down as the server returns it. Not one chunk. – epascarello Jan 18 '13 at 22:14
  • So does the server generate the data line by line, so to speak? Does it generate some of the data, send it, generate some more, send some more and so forth? Does OP have control over the server? Can OP make changes to the way it works? – Lee Meador Jan 18 '13 at 22:19
  • @LeeMeador, Yes, i receive data line by line. Yes, i have control over the server. – Marcio Mazzucato Jan 18 '13 at 22:20
  • To add another question ... does the page load little by little, top to bottom when you paste the URL into a browser window? – Lee Meador Jan 18 '13 at 22:20
  • @LeeMeador, When try to open the page in a browser i got the page little by little, inside the 10 minutos interval. – Marcio Mazzucato Jan 18 '13 at 22:21

3 Answers3

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, complete 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:

gilly3
  • 87,962
  • 25
  • 144
  • 176
  • It is working partly, after about 4 minutes it stops to receive the information about the execution status. Do you know what can be this? – Marcio Mazzucato Jan 20 '13 at 06:02
  • @MarcioSimao - Works for me: http://jumpingfishes.com/progresstest2.htm. Could it be your server? If nothing is sent from your server for a long period of time, you won't receive any updates during that time. – gilly3 Jan 21 '13 at 20:14
  • Many thanks! I will analyze what is happening, maybe can be a server configuration. Anyway, thank you very much! – Marcio Mazzucato Feb 01 '13 at 21:36
0

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.

Community
  • 1
  • 1
George
  • 4,147
  • 24
  • 33
0

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.

Lee Meador
  • 12,829
  • 2
  • 36
  • 42