Question

I’m using jQuery + PHP on my website and I want to do something like this:
To simplify things I’ve got a page with 2 buttons () and according to which I click I want to start a script in background (php script) so I do a simple thing with jquery:

$("#button1").click(function(){
    $.post("script.php", {val:"but1"}, function(result){
        alert(result); // I want something with the result
    });
});

$("#button2").click(function(){
    $.post("script.php", {val:"but2"}, function(result){
        alert(result);
    });
});

and in the script.php I’ve got a simple if statement deciding what I should do.
In the php script I’m downloading a file and I want to create a progress bar of the file download. The php script would return me values (echo percentage; flush();) in some time interval.
And here comes the problem – when I echo those percentage values and flush it refreshes it “just in php” but the jquery waits until the script is finished anyway. Is there a way to get those values as they appear (after flush) or is there a completely other approach to this? I can’t think of anything else right now, maybe I shouldn’t be using jquery at all.
Thanks for the help.

Answer 1

You can store the progress in a text file or DB while running the script and then have another file get the result via AJAX calls.

JS/HTML

<script>
$(function() {
    var id;
    var timeoutLength = 1000;

    $("#button1").click(function() {
        $("#result").html("");

        // Create unique identifier
        id = (new Date().getTime()) + "-" + Math.floor(Math.random()*100);
        $.get("script.php", {id: id}, function(result){
            $("#result").html(result);
        });

        setTimeout(checkProgress, timeoutLength);
    });

    function checkProgress() {
        $.get("script.php", {progress: true, id: id}, function(data) {
            prog = parseInt(data);
            // Display progress bar
            if(prog < 100) {
                $("#progress").css({ display: 'block', width: prog });
                $("#progress").html(prog + "%");

                setTimeout(checkProgress, timeoutLength);
            } else {
                $("#progress").css('display', 'none');
            }
        });
    }
})
</script>
<button id="button1">Click</button>
<div id="progress" style="background: green"></div>
<div id="result"></div>

script.php

<?php

function getProgress($file) {
    return (file_exists($file)) ? file_get_contents($file) : 0;
}

function setProgress($file, $progress) {
    file_put_contents($file, $progress);
}

// Remove invalid characters
$id = str_replace('/[^a-zA-Z0-9\-_]/', '', $_GET['id']);
$file = "progress-" . $id . ".txt";

if(isset($_GET['progress'])) {
    echo getProgress($file);
} else {
    // Do something and update progress
    for($i = 10; $i <= 100; $i += 10) {
        // Do something

        setProgress($file, $i);
        sleep(1);
    }
    unlink($file);
    echo "Result: " . rand(1, 100);
}

Edit:
Added support for multiple requests and simple progress bar.