Jquery Update DIV with rsync progress

Question

I'm trying to update a DIV with the ongoing output from an rsync command. The idea being I can see how the download is progressing.

This is the code I've got, but I'm getting errors relating 'Uncaught SyntaxError: Unexpected token ILLEGAL'

<?php
$down = popen('rsyncd -Pav http://ipv4.download.thinkbroadband.com/1GB.zip 1GB.zip', 'r');

while($progress = fgets($down, 124)) {
    ob_flush();flush();
?>
    <script type="text/javascript">
        $(document).ready(function() {
            var update = "<?php echo $progress; ?>";
            $("#status").html(update);
        });
    </script>

<?php
    ob_flush();
    ob_flush();flush();
}

    pclose($down);
}
?>

<div id="status"></div>

In the console I can see that it relates to :

var update = "    33390592  46%    4.62MB/s    0:00:08
    34701312  48%    4.63MB/s    0:00:07
    35979264  50%    4.63MB/s    0:00:07
";

How can I get each line of update and show it in a DIV without getting errors ?

Thanks

UPDATE

I'm now using this. The php echo for $update shows the output live in the web page, but the DIV is not updated until the page completes and then I only get the last line of output.

Why does the php echo work, but the jquery update to the div now work as expected ?

<?php
$down = popen('rsyncd -Pav http://ipv4.download.thinkbroadband.com/1GB.zip 1GB.zip', 'r');
$order   = array("\r\n", "\n", "\r");

while($progress = fgets($down, 32)) {
    ob_flush();flush();
    $update = str_replace($order,'<br />', $progress);
    echo $update; // <-- this outputs fine.
?>
    <script type="text/javascript">
        $(document).ready(function() {
            var update = "<?php echo $update; ?>";
            $("#status").html(update);
        });
    </script>

<?php
    ob_flush();flush();
}

    pclose($down);
}
?>

Is this due to the jquery not running until the page is fully loaded, so the div is only updated with the last entry of $update ?

If so is there any way to have the jquery run as the page is loading so the DIV is updated ?

Thanks :)

Thanks

UPDATE

<script type="text/javascript">
$(document).ready(function() {
    $.ajaxSetup({ cache: false });

    $("#test").click(function () {  $("#log").load("go.php"); });

});
</script>

Just tried the above, it works and calls go.php and I get the output but only when go.php has finished the rsync download. any way to show the ongoing output whilst the download happens ?

Answer 1

use str_replace() php function

<?php
$order   = array("\r\n", "\n", "\r");
$replace = '<br />';
?>
<script type="text/javascript">
            $(document).ready(function() {
                var update = "<?php echo str_replace($order, $replace, $progress); ?>";
                $("#status").html(update);
            });
        </script>