CODEWITHSUNDEEP
javascriptjqueryhtmljquery-load
Marcio Mazzucato
Marcio Mazzucato

Reputation: 9285

How to load dynamic content into a DIV using JQuery

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");

Upvotes: 2

Views: 7956

Answers (3)

gilly3
gilly3

Reputation: 91467

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:

Upvotes: 3

Lee Meador
Lee Meador

Reputation: 12985

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.

Upvotes: 0

George
George

Reputation: 4257

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.

Upvotes: 0

Related Questions