Updating JQuery UI Progressbar inside Updatepanel

Question

How can I use JQuery UI Progressbar inside Updatepanel?
When I try to do the following, progresbar is not being updated when it's inside updatepanel.

<script type="text/javascript">
  $(document).ready(function() {
    $("#progressbar").progressbar({ value: 0 });
    $("#progressbar").css({ 'background': 'LightYellow' });
    $("#progressbar > div").css({ 'background': '#3366CC' });
  });
</script>

<script type="text/javascript">
  var counter = 0;
  function UpdateProgress() {
    $("#progressbar").progressbar("value", counter);
    counter = counter + 10;
    if (counter >= 100) {
      counter = 0;
    }
    else
      setTimeout('UpdateProgress()', 1000);
  }
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
    <asp:panel ID="Panel1" runat="server" Visible="True">
      <div id="progressbar" style="height:30px;"></div>
    </asp:panel>
  </ContentTemplate>
</asp:UpdatePanel>

Code-behind:

protected void Button1_Click(object sender, EventArgs e)
{     
  ScriptManager.RegisterStartupScript(this, this.GetType(), "temp", "<script language='javascript'>UpdateProgress();</script>", false);
}

Answer 1

You have to re-create the widget since it's destroyed when the UpdatePanel refreshes, like this overall:

var counter = 0;  
function createProgressBar() {
  $("#progressbar").progressbar({ value: counter })
                   .css({ 'background': 'LightYellow' })
                   .children("div").css({ 'background': '#3366CC' });
}  
function UpdateProgress() {
  $("#progressbar").progressbar("value", counter);
  counter = counter + 10;
  if (counter >= 100) {
      counter = 0;
  }
  else
    setTimeout(UpdateProgress, 1000);
}

$(createProgressBar); //Run it on page load
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(createProgressBar);

This creates the progress bar when the page loads, and also re-runs it when the UpdatePanel comes back (with new elements, where the progress bar widget doesn't exist) by adding the same creation method as a endRequest event handler. Also note we're using the counter (initially 0 still) in the creation method so when re-creating it has the current value.

Another side note is try not to pass strings to setTimeout(), you can pass a function reference directly, like I have above...this will save you headaches later, and be more efficient to boot.