3

我在更新面板中有一个 jquery ui datepicker 文本框。由于某种原因，我无法再单击它来加载日期选择器。这就是我所拥有的。

// Datepicker settings
$('body').on('load', '#dpWorkWeek', function() {
    $(this).datepicker({
        changeMonth: true,
        changeYear: true,
    });
});


<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
      <asp:TextBox ID="dpWorkWeek" runat="server" ClientIDMode="Static" CssClass="dpWorkWeek"></asp:TextBox>

 </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" />
</Triggers>

4

3 回答 3

5

我认为您遇到的是您的日期选择器在异步回发后不再工作。如果是这种情况，这是解决它的一种方法 -

window.onload = function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}

function endRequestHandler(sender, args) {
    init();
}

function init() {
    $("#<%=dpWorkWeek.ClientID %>").datepicker({
        changeMonth: true,
        changeYear: true
    });
}

$(function() { // DOM ready
    init();
});


<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
      <asp:TextBox ID="dpWorkWeek" runat="server" CssClass="dpWorkWeek"></asp:TextBox>
 </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" />
</Triggers>

这种方法使用Sys.WebForms.PageRequestManager JavaScript 类并且是可能的，因为您的 .aspx 页面上有一个脚本管理器。基本上在每次异步回发之后，都会调用 init() 函数。

注意 init() 函数也在 DOM 就绪状态下被调用。这允许您在异步回发期间内容更改后再次对 DOM 执行所有操作。

我还删除了您的ClientIdMode属性，否则我认为这会导致问题。

/编辑

看到下面的答案后，您当然也可以这样做，我喜欢它的简洁性 -

function pageLoad(sender, args) {
    $("#<%=dpWorkWeek.ClientID %>").datepicker({
        changeMonth: true,
        changeYear: true
    });
}

如果这不起作用，这应该总是 -

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, args) {
 // ...
});
于 2013-09-27T01:19:34.707 回答
3

是的，JQuery 日期选择器在更新面板中不能很好地工作。

问题是因为在触发body onLoad时未调用您的函数，因此字段丢失了它们的绑定。UpdatePanel所以你有几个选择：

  • 将整个字段移到更新面板之外
  • 如果不能简单地将其移到更新面板之外，可以使用备用字段，当日期值更改时，JQuery 会同时更新这两个字段
    • 这种方法的问题是，忽略了您需要两个字段的事实，弹出日期选择器实际上将显示为附加到/靠近正常字段，这可能距离更新面板很远。
  • 在每次回发时重新绑定日期选择器
    • 这种方法的问题是，如果在日期选择器打开时触发更新面板，日期选择器就会关闭。如果这可能发生，您必须编写一些逻辑来检测它何时打开/关闭，并在绑定后重新打开它（如有必要）。

如果UpdatePanel没有在计时器或任何东西上触发，则最后一种方法的问题可能对您无关紧要。要使用“始终重新绑定”方法，请将初始化移动到 javascript 函数中pageLoad()：

function pageLoad(sender, args)
{
    // Fix the datepicker here
}

编辑：是的，pageLoad在所有回发时都会调用该函数，即使名称似乎暗示其他方式。

于 2013-09-27T01:25:13.207 回答
-1

这在我的代码中有效，请遵循此代码。

( Company : Infotrack Telematics private limited )
<script type="text/javascript">
        $(document).ready(function () {

                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);



        });

        function endRequestHandler(sender, args) {
            init();
        }

        function init() {
            var txtTripStartTime = '#<%=txtNotavlFrom.ClientID %>';
                $('#<%=txtNotavlFrom.ClientID %>').datepicker({
                    dateFormat: 'dd/mm/yy',
                    minDate: 0,
                    beforeShow: function () {
                        $(".ui-datepicker").css('font-size', 10)
                    },
                    onSelect: function (selected) {
                        $('#<%=txtnotavlTo.ClientID %>').datepicker("option", "minDate", selected)

        }

    });
        var txtTripEndTime = '#<%=txtnotavlTo.ClientID %>';
                $('#<%=txtnotavlTo.ClientID %>').datepicker({

                    dateFormat: 'dd/mm/yy',
                    minDate: 0,
                    beforeShow: function () {
                        $(".ui-datepicker").css('font-size', 10)
                    }

                });
            }
于 2015-01-16T13:13:04.917 回答