jquery progressbar - loads all at once

I'd like to have a jQuery progress bar that updates based on the status of the server side request. I'm basing this code off of this tutorial but it uses a file uploader as its base (same as this question). I can't get it to work quite the same without the file uploader. The problem is that the progress bar only updates after process.php is done. Rather than asynchronously asking for an update on the progress, it waits for the whole process to be done. I only see the data: data alert once.

Any ideas?

Webpage:

Process.php - called when form is submitted


javascript

$(document).ready(function() {
    var started = false;// This flag determines if the upload has started
    $(function() {
        // Start progress tracking when the form is submitted
        $('#upload-form').submit(function() {
            $('#progressbar').progressbar();// Initialize the jQuery UI plugin

            // We know the upload is complete when the frame loads
            $('#upload-frame').load(function() {
                // This is to prevent infinite loop
                // in case the upload is too fast
                started = true;
                // Do whatever you want when upload is complete
                alert('Upload Complete!');
            });

            // Start updating progress after a 1 second delay
            setTimeout(function() {
                // We pass the upload identifier to our function
                updateProgress($('#uid').val());
            }, 1000);
        });
    });

    function updateProgress(id) {
        var time = new Date().getTime();
        // Make a GET request to the server
        // Pass our upload identifier as a parameter
        // Also pass current time to prevent caching
        $.ajax({
            url: 'getProgress.php',
            type: "GET",
            cache: false,
            data: {'uid':id}, 
            dataType: 'text',
            success: function(data){
                alert("data: " + data);
                var progress = parseInt(data, 10);
                if (progress < 100 || !started) {
                    // Determine if upload has started
                    started = progress < 100;
                    // If we aren't done or started, update again
                    updateProgress(id);
                }
                // Update the progress bar percentage
                // But only if we have started
                started && $('#progressbar').progressbar('value', progress);
            }
        });
    }
}(jQuery));

getProgress.php - called by the ajax request:


5
задан Community 23 May 2017 в 12:06
поделиться