禁止更新jQuery滑塊的ASP.NET UpdatePanel

我有一個網站正在顯示來自數據庫的數據，並且我無法讓jQuery widgits正確更新其他asp.net對象。禁止更新jQuery滑塊的ASP.NET UpdatePanel

網站結構是這樣的：

[Opt1-DDownList] [Opt2-DDownList] [DateSelectTextBox] [TimeSelectTextBox] 
        [UpdateProgressText]   [jQuery Slider to select time] 
[----------------- Table of Data depending on selected options ----------------]

這個jQuery的DatePicker連接到DateSelectTextBox。頂部的四個項目通過更改表中顯示的數據來觸發頁面更新。 UpdateProgressText告訴用戶在更新頁面時正在加載數據。

起初，我有一切在asp:UpdatePanel。當我嘗試更改TimeSelect的最大值時，滑塊的UI不會更新。即使我試圖用pageLoad()中的新的最大值創建一個新的jQuery Slider，當我讀取一頁頁面時，我就會調用它。

然後我試着拿出asp:UpdatePanel以外的所有東西，除了桌子。 jQuery滑塊開始更新，但asp:UpdateProgress停止觸發（可能是因爲頁面加載是由下列之一觸發的：（1）下拉列表之一，（2）日期選擇或（3）時間選擇和他們都不在asp:UpdatePanel。

有沒有一種辦法，以確保jQuery的滑塊更新其UI，而這是在asp:UpdatePanel？

是否有一般準則與jQuery工作時，javascript可循的，asp:UpdatePanel ？我一直在網上查詢，關於這個問題還有很多問題，但是我找不到適用於我的一般指導方針或解決方案。

謝謝！

編輯：這裏是一個片段我用「重新綁定」代碼修復以下建議給你的結構/內容的想法：

<body> 
    <form id="frm" runat="server"> 
    <asp:ScriptManager runat="server"></asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdateData" runat="server"> 
     <ContentTemplate> 
      <asp:DropDownList ID="dd1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RefreshData"></asp:DropDownList> 
      <asp:DropDownList ID="dd2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RefreshData"></asp:DropDownList>  
      Day: <asp:TextBox ID="DaySelect" runat="server" AutoPostBack="true" OnTextChanged="RefreshData"></asp:TextBox>  
      Time: <asp:TextBox ID="TimeSelect" runat="server" AutoPostBack="true" OnTextChanged="RefreshData"></asp:TextBox>  
      <table width="850px"> 
      <tr> 
       <td width="200px"></td> 
       <td width="450px"> 
        <asp:UpdateProgress ID="LoadingProgress" runat="server" DisplayAfter="500"> 
         <ProgressTemplate>Loading...</ProgressTemplate> 
        </asp:UpdateProgress> 
       </td> 
       <td width="200px"> 
         <div style="width: 200px;" id="sliceControl"></div> 
       </td> 
      </tr> 
      </table> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript" id="uiscripts"> 
     var sliceIndex = 0; 

     var sliceControl = $("#sliceControl"); 
     sliceControl.slider({ 
      min: 0, 
      ticks: 1, 
      slide: function (event, ui) { OnSelectedSliceChanged(ui.value); }, 
      create: function (event, ui) { 
       sliceControl.slider("option", "max", "<%=ViewState[maxTicks]%>"); 
       sliceControl.slider("value", "<%=ViewState[currentInterval]%>"); 
       sliceIndex = sliceControl.slider("value"); 
      } 
     }); 

     function InitWidgits() { 
      var datePicker = $("#DaySelect"); 
      datePicker.datepicker({}); 

      var now = new Date(); 
      var utc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds()); 
      var numValidDays = 7; 
      var millisecondsInADay = 24 * 60 * 60 * 1000; 

      datePicker.datepicker("option", "minDate", new Date(utc.getTime() - numValidDays * millisecondsInADay)); 
      datePicker.datepicker("option", "maxDate", utc); 

      try { 
       sliceControl.slider("destroy"); 
      } catch (e) { } 
      sliceControl.slider({ 
       min: 0, 
       ticks: 1, 
       stop: function (event, ui) { $("#TimeSelect").trigger("onchange", null); }, 
       slide: function (event, ui) { OnSelectedSliceChanged(ui.value); }, 
       create: function (event, ui) { 
        sliceControl.slider("option", "max", "<%=ViewState[maxTicks]%>"); 
         sliceControl.slider("value", sliceIndex); 
        } 
       }); 

        $("#TimeSelect").prop("readonly", "readonly"); 
        $("#DaySelect").prop("readonly", "readonly"); 
      } 
     $(document).ready(function() { 
      // bind your jQuery events here initially 
      InitWidgits(); 
     }); 

     var prm = Sys.WebForms.PageRequestManager.getInstance(); 

     prm.add_endRequest(function() { 
      // re-bind your jQuery events here 
      InitWidgits(); 
     }); 
    </script> 
    [Code for Table of Data] 
    </ContentTemplate> 
    </asp:UpdatePanel> 
</form> 
</body>

來源

2013-08-01 Kirsten Koa

沒有真正的解決方案工作得到的UpdatePanel和jQuery widgits一起工作，我剛結束擺脫所有的UpdatePanels，現在一切正常。

來源

2013-08-13 23:12:07

你必須在結束請求重新綁定您的jQuery事件。

$(document).ready(function() { 
     // bind your jQuery events here initially 
    }); 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
     // re-bind your jQuery events here 
    });

來源

2013-08-01 06:13:26

rebind是什麼意思？你的意思是重新創造嗎？這個代碼我的jQuery元素仍然消失。我將在上面添加一個代碼片段。 –

從閱讀關於bind的文檔：http：//api.jquery.com/bind/，它看起來像是用於事件處理。我的問題是最大值不更新，並不是事件不具有約束力。除非你認爲這兩者是相關的，否則它可能不是一回事。 –

我們有很多jQuery和更新面板。這是我們正在做的事情，使事情的工作，例如用於提示：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) { ... } 
    RegisterScripts(...); 
} 

private void RegisterScripts(...) 
{ 
    string script = string.Empty; 

    if (onWindowLoad) 
    { 
     script = "$(window).bind('load', function() { $('#myDiv').tooltip({...}); });"; 
    } 
    else 
    { 
     script = "$(function() { $('#myDiv').tooltip({...}); });"; 
    } 
    System.Web.UI.ScriptManager.RegisterStartupScript(Page, Page.GetType(), scriptKey, script, true); 
}

通常「$（函數（）...」作品（發生在DOM被解析），但有時你必須使用「$（窗口）.bind」（在頁面加載後會發生）

欲瞭解更多信息點擊這裏：。http://forum.jquery.com/topic/jquery-window-bind-load-function-vs-onready

來源

2013-08-01 06:26:06

禁止更新jQuery滑塊的ASP.NET UpdatePanel

回答

相關問題