ASP.NET UpdatePanel阻止jQuery滑塊更新

Question

我有一個網站，該網站顯示數據庫中的數據，但我無法讓jQuery widgits與其他asp.net對象一起正確更新。

該網站的結構如下：

[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 Slider在asp:UpdatePanel時更新其UI？

使用jQuery ， javascript和asp:UpdatePanel時是否要遵循一般准則？ 我一直在上網尋找有關該主題的很多問題，但找不到適合我的通用指南或解決方案。

謝謝！

編輯：這是我的代碼段，其中包含以下建議的“重新綁定”修復程序，以使您對struct / contents有一個了解：

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

Answer 1

您需要在結束請求時重新綁定您的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
    });

更多細節：-jQuery $（document）.ready和UpdatePanels？

Answer 2

我們有很多的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);
}

通常，“ $（function（）...”）可以工作（發生在解析DOM時），但是有時您必須使用“ $（window）.bind“（在頁面加載后發生）。

有關更多信息，請參見此處： http : //forum.jquery.com/topic/jquery-window-bind-load-function-vs-onready

Answer 3

沒有真正的解決方案可以使UpdatePanels和jQuery widgits一起工作。 我剛剛擺脫了所有UpdatePanel，現在一切正常。

ASP.NET UpdatePanel阻止jQuery滑塊更新

問題描述

3 個解決方案

解決方案1
0 2013-08-01 06:13:26

解決方案2
0 2013-08-01 06:26:06

解決方案3
0 已采納 2013-08-13 23:12:07

ASP.NET UpdatePanel阻止jQuery滑塊更新

問題描述

3 個解決方案

解決方案1 0 2013-08-01 06:13:26

解決方案2 0 2013-08-01 06:26:06

解決方案3 0 已采納 2013-08-13 23:12:07

解決方案1
0 2013-08-01 06:13:26

解決方案2
0 2013-08-01 06:26:06

解決方案3
0 已采納 2013-08-13 23:12:07