1

我有一个网站正在显示来自数据库的数据，但我无法让 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 不会更新。即使我尝试使用 in 中的新最大值创建一个新的 jQuery Slider，pageLoad()每当加载页面的一部分时，我都会调用它。

asp:UpdatePanel然后我试着把桌子上的所有东西都拿出来。jQuery 滑块开始更新，但asp:UpdateProgress停止被触发（可能是因为页面加载是由以下之一触发：（1）下拉列表之一，（2）日期选择，或（3）时间选择和无他们中的一个asp:UpdatePanel。

有没有办法确保 jQuery Slider 更新它的 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>
4

3 回答 3

0

您需要在结束请求时重新绑定您的 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？

于 2013-08-01T06:13:26.150 回答
0

我们有很多 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

于 2013-08-01T06:26:06.703 回答
0

没有真正的解决方案可以让 UpdatePanels 和 jQuery 小部件一起工作。我刚刚摆脱了所有的 UpdatePanel，现在一切正常。

于 2013-08-13T23:12:07.007 回答