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时是否需要遵循一般准则？我一直在网上看，关于这个问题有很多问题，但我找不到适合我的一般指南或解决方案。

谢谢！

编辑：以下是我的代码片段，其中包含下面建议的“重新绑定”修补程序，以便您了解结构/内容：

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

更多detils： - jQuery $(document).ready and 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 个答案: