jQuery progress bar

Very often we want to check the progress with the server while waiting for an output.

Assume the server has an endpoint /progress for checking status, and we want to check the status every 5 seconds and update a progress bar / display text.

The below update_progress function simply 'get' data from /progress endpiont and display it as text on the 'message' element (a div or any thing). The trick is the setTimeout function which calls the update_progress function itself again after 5 seconds. In this way it is like a loop running the 'get' every 5 seconds. But you will need some protocol to quit the loop (missing in the example here), e.g. if data is 'END' then skip the setTimeout so it will quit.

$(function() {

$('#submitfile').click( function(){

update_progress()

} ) } );

function update_progress(){

$.get( "/progress", function( data ) {

if(data != ""){ $("#message").text(data) }

setTimeout(update_progress, 5000)

} )}

</script>

You may also want something more fancy than simply displaying the progress as a text element. E.g. a progress bar.

Below is an exmaple, you need the jquery-ui.js library. Simply define a div element as the progress bar, and initiate it using the $( "#progressbar" ).progressbar({value: 0 }); The initial value is 0, the default range is 0-100.

$( function() {

$( "#progressbar" ).progressbar({

value: 0

});

} );

</script>

</head><body>

</body></html>

Now if you want to update the progress bar, in the obove update_progress function, you may simply get or set the value by:

// Getter

var value = $( ".progressbar" ).progressbar( "option", "value" );

// Setter

$( ".progressbar" ).progressbar( "option", "value", 25 );

Now you want to display the progress bar only when a certain button is clicked intead of showing it all the time. You may set the css style to 'display:none' so it won't display.

When a submit button is clicked, dynamically change the css style to "display:block" so it will display.

$('#submitfile').click(

function(){

if($("#progressbar").css("display")== "none"){

$("#progressbar").css("display", "block")

}} )

Simply combine the above snippets.