个人中心
gpt4 book ai didi

javascript - ASP.NET UpdatePanel 阻止 jQuery slider 更新

转载 作者：行者123 更新时间：2023-11-28 08:59:13 24 4
gpt4 key购买 nike

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

然后我尝试从 asp:UpdatePanel 中取出除表格之外的所有内容。 jQuery slider 开始更新，但 asp:UpdateProgress 停止被触发(可能是因为页面加载由以下其中一项触发:(1) 下拉列表之一，(2) 日期选择，或 (3) 时间选择，但它们都不在 asp:UpdatePanel 中。

有没有办法确保 jQuery Slider 在 asp:UpdatePanel 中更新其 UI？

使用 jQuery、javascript 和 asp:UpdatePanel 时是否有需要遵循的一般准则？我一直在网上查找，有很多关于该主题的问题，但我找不到适合我的通用指南或解决方案。

谢谢!

编辑:这是我的代码片段，其中包含下面建议的“重新绑定(bind)”修复，以便您了解结构/内容:

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

最佳答案

您需要在结束请求时重新绑定(bind) 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 and UpdatePanels?

关于javascript - ASP.NET UpdatePanel 阻止 jQuery slider 更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17986360/

24 4 0
文章推荐： ios - 自定义 UILabel 在 Interface Builder 中显示不正确
文章推荐： css - 隐藏第一个
  • 元素
    • 文章推荐： html - 我无法排列不垂直对齐的 div 元素，以便它们自动调整大小
    文章推荐： css - 为什么我的 Bootstrap 3 按钮图标不显示？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com