Question

我在更新面板中有一个jquery ui datepicker文本框。出于某种原因，我无法再点击它来加载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>

Answer 1

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

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 class，因为您的.aspx页面上有Script Manager，因此可以使用{{3}}。基本上每次异步回发后都会调用init（）函数。

请注意，在DOM ready中也调用了init（）函数。这使您可以在异步回发期间更改内容后再次执行所需的DOM。

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

/编辑

在看到下面的答案之后，你当然可以这样做，我喜欢它的简洁 -

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

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

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, args) {
 // ...
});

Answer 2

是的，JQuery datepicker在更新面板中不能正常工作。

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

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

如果UpdatePanel没有触发计时器或其他任何问题，最后一种方法可能对您无关紧要。要使用“always rebind”方法，请将初始化移至javascript函数pageLoad()：

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

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

Answer 3

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

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

                });
            }

微软更新面板和jquery datepicker

3 个答案: