更新UpdatePanel内部的JQuery UI进度条

Question

如何在UpdatePanel内部使用JQuery UI进度条？
当我尝试执行以下操作时，progresbar在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> 

代码隐藏：

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

Answer 1

你要因为它破坏了的UpdatePanel刷新时，像重新创建控件这个总：

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); 

这将创建进度条当页面加载时，并且在UpdatePanel返回时（通过新元素，进度条小部件不存在的地方），通过添加与endRequest event处理程序相同的创建方法，重新运行它。还要注意，我们在创建方法中使用计数器（最初为0），因此重新创建时具有当前值。

另一个方面是尽量不要传递字符串到setTimeout()，你可以直接传递一个函数引用，就像我上面所说的那样......这会在以后节省你的头痛，并且更有效地启动。