Question

我有一个j-query日期选择器，在第一篇回发后不起作用。它仅在回发之前有效但日期选择器在回发后不起作用。显示日期选择器的文本框包含ajax更新面板。这是我的j查询：

<script type="text/javascript">
    $().ready(function () {
        $('.date-picker').mousedown(function () {

            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
    });
</script>
<style type="text/css">
.ui-datepicker-calendar {
    display: none;
    }
</style>

Answer 1

您的问题是，在部分回发时，即当UpdatePanel导致回复时发生的情况，DOM不会重新加载，因此您的$().ready(function () {将无法启动并连接日期选择器。这是ASP.NET AJAX陷阱之一。

处理此问题的一种方法是在PageRequestManager通过UpdatePanel进行部分回发时调用JavaScript函数，如下所示：

<script type="text/javascript">
    $().ready(function () {
        $('.date-picker').mousedown(function () {

            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        // Re-bind your jQuery objects here

    });
</script>

注意：这是jQuery和ASP.NET AJAX在没有一点调整的情况下不能很好地运行的地方之一。

回帖后，jquery datepicker不起作用

1 个答案: