Yet another simple jQuery progress bar question

Question

I want to modify this code so that the value is a variable and so that the progress bar refreshes in real time (or the smallest meter of time possible - milliseconds)

I am going to "seed" the current time to drive the updates

<script type="text/javascript">
$(function() 
{             
    $("#container").progressbar({ value: 0 });
});
</script>

---

Fosco's edit: (currently not working)

    <script type="text/javascript">
    updateProgress(0);
    function updateProgress(newvalue) 
    {
        $("#container").progressbar({ 'value': newvalue });
        newvalue = newvalue + 1
        if (newvalue < 101) setTimeout('updateProgress(' + newvalue + ');',100);
    }
    </script>

Answer 1

Problem is, what would be driving this refresh? That's all you need to know. What value will be changing?

Wherever that is changing, change the value of the progressbar.

$("#container").progressbar({ value: 10 }); 

seeding based on time you say?...

function updateProgress(newvalue) {
    $("#container").progressbar({ 'value': newvalue });
    newvalue = newvalue + 1
    if (newvalue < 101) setTimeout('updateProgress(' + newvalue + ');',100);
}

then your initial function to start it would be:

updateProgress(0);

give that a shot.

Answer 2

The first bit is easy

<script type="text/javascript">
$(function(value) 
{             
    $("#container").progressbar({ value: value });
});
</script>

The next bit not so easy. The purpose of a progress bar is to show progress, so what is it showing the progress of? You should call this function from code that is performing whatever action it is reflecting, as often as you can.

If you just want to loop the code, then set a timeout to call the function after 1 ms, and repeat.

Worth mentioning that the actual smallest time resolution of most browsers is not 1 ms, but quite a bit less.

Answer 3

By 'real time', I assume you mean that you want to update it as some series of steps complete. If you are looking to update the progress bar based on the passing of time, I recommend just using some kind of animated graphic. Otherwise, you could reach the end of your progress bar before the function actually completes, which would be confusing for your users.

I used the progress bar in an application where I had three tasks to perform to complete an action. Each task was submitted with its own ajax call, and each included the following in its success handler:

$('.progress').progressbar('option', 'value', $('.progress').progressbar('option', 'value') + 33);

That is, I added 33 to the current value of the progress bar each time one of the tasks was finished.