Question

Consider an AJAX call that writes to a div:

recent_req=$.post('result.php', { d: data }, function(returnData) {
    $('#content').html(returnData);
});

The PHP script at result.php performs some functions that take time, about 5-20 seconds per step. I am using PHP’s flush() function to get the info to the browser as soon as each step starts and ends, but how can I get the Javascript to write the data to the #content div as it comes in?

Thanks.

EDIT:
To clarify: Assume result.php looks like the following and due to constraints cannot be practically refactored:

<?php

echo "Starting...<br />";
flush();

longOperation();
echo "Done with first long operation.<br />";
flush();

anotherLongOperation();
echo "Done with another long operation.<br />";
flush();

?>

How might the AJAX be structured to call result.php such that the echo statements are appended to the #content div as they come in? Any solution with / without jQuery is welcome. Thanks!

Answer 1

There’s a technique using an iframe which you could use to achieve this.

Similar to other suggestions involving frames but it doesn’t involve sessions or polling or anything, and doesn’t need you to display the iframe itself. It also has the benefit of running any code you want at any point in the process, in case you’re doing something more sophisticated with your UI than just pushing text to a div (e.g. you could update a progress bar).

Basically, submit the form to a hidden iFrame then flush javascript to that frame, which interacts with functions in the iFrame’s parent.

Like this:

HTML:

<form target="results" action="result.php" method="post">
<!-- your form -->
<input type="submit" value="Go" />
</form>

<iframe name="results" id="results" width="0" height="0" />
<div id="progress"></div>

Javascript, in your main page:

function updateProgress(progress) {
  $("#progress").append("<div>" + progress + "</div>");
}

result.php:

<?php

echo "<script language='javascript'>parent.updateProgress('Starting...');</script>";
flush();

longOperation();
echo "<script language='javascript'>parent.updateProgress('Done with first long operation.');</script>";
flush();

anotherLongOperation();
echo "<script language='javascript'>parent.updateProgress('Done with another long operation.');</script>";
flush();

?>