Question

如何在Updatepanel中使用JQuery UI Progressbar？
当我尝试执行以下操作时，如果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返回时重新运行它（使用新元素，其中进度条小部件不存在），方法是添加与{{3相同的创建方法处理程序。另请注意，我们在创建方法中使用计数器（最初为0），因此在重新创建时具有当前值。

另一方面的注意事项是尽量不将字符串传递给setTimeout()，你可以直接传递一个函数引用，就像我上面的那样...这样可以避免以后的麻烦，并且提高启动效率。

在Updatepanel中更新JQuery UI Progressbar

1 个答案: