Updating JQuery UI Progressbar inside Updatepanel - asp.net

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.