Progressbar won't reset properly

962 Views Asked by At

I'm having some difficulty getting my progress bar to reset and continue counting. In my code I have a button that opens a JQuery ui dialog box with a progress bar which counts up to 100% then closes. When I click the button again to reset the progress bar, it just stays at 0% without updating. This there anything I'm missing in my code?

Here's my dialog box

$( "#dialog" ).dialog({
    autoOpen: false,
    dialogClass: "no-close", 
    draggable: false, 
    resizable: false, 
    height: 200, 
    width: 200          
});

The button I have opening the dialog box

$("#button").click(function() {
    $('#progressbar').progressbar('option','value', 0);
    $( "#dialog" ).dialog( "open" );
});

My code for the progress bar

$(function() {
        var progressbar = $( "#progressbar" ),
        progressLabel = $( ".progress-label" );

        progressbar.progressbar({
            value: true,
            change: function() {
            progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        },

        complete: function() {
            progressLabel.text( "Complete!" );
            setTimeout("$('#dialog').dialog('close')",3000);

            }
        });

           function progress() {
          var val = progressbar.progressbar( "value" );
          progressbar.progressbar( "value", val + 2 );
          if ( val < 99 ) {
            setTimeout( progress, 80 );
          }
        }
        setTimeout( progress, 2000 );
});

Edit: Here's the html

<div id="dialog" title="Progress Bar">
    <div align="right">
        <small id="name">Name</small>
    </div>
    <small id="temp">Temp</small><br />
    <small id="temp2">Temp2</small><br /><br />
    <div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>
1

There are 1 best solutions below

0
On BEST ANSWER

See fiddle (someone else started)

You need to start the function progress() again once you click the button. You also should make sure the progress() function is in the scope of the button click event.

$("#button").click(function() {
     $('#progressbar').progressbar('value', 0);
     $( "#dialog" ).dialog( "open" );
     //restart
     progress();
});