更新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()，你可以直接傳遞一個函數引用，就像我上面所說的那樣......這會在以後節省你的頭痛，並且更有效地啓動。