Question

我使用asp.net mvc 2和jquery 1.10.1以及jquery ui 1.10.3。

当我用$ .ajax加载页面时，datepicker有点偏。它会弹出并像往常一样回去，但与它的互动却被打破了。

例如：我点击输入=＆gt; datepicker弹出=＆gt;选择日期=＆gt; currentdate未定义的错误

一个页面可以有多个带有datepickers的输入，这就是我在我的代码中使用.each的原因。

我有2页：Index.aspx和PatchDef.aspx。 Index使用$ .ajax调用动态加载PatchDef.aspx。

在PatchDef.aspx中我使用带有$（document）.ready代码的标签，它将日期选择器绑定到我的输入。

这是我现在正在使用的代码：

$(document).ready(function () {
    $(".datePickerPatchDef").each(function () {
                    var dateFormat = $(this).attr("dateFormatPatchDef").toLowerCase();
                    $(this).datepicker({
                        dateFormat: dateFormat,
                        changeMonth: true,
                        changeYear: true
                    });
   });
});

我还尝试了以下代码here：

注意：这里的类会像dpCount1; dpCount2，...

$(".datePickerPatchDef").each(function () {
                var dateFormat = $(this).attr("dateFormatPatchDef").toLowerCase();
                $(this).datepicker({
                var dpCountClass;
                var allClasses = $(this).attr("class").split(' ');

                for (var i = 0; i < allClasses.length; ++i) {
                    var singleClass = allClasses[i];
                    if (singleClass.match("^dpCount")) {
                        dpCountClass = "." + singleClass;
                    }
                }

                $("#switchUser").text(dpCountClass);
                $("body").on("focusin", dpCountClass, function () {
                    $(this).datepicker({
                        dateFormat: dateFormat,
                        changeMonth: true,
                        changeYear: true
                    });
                });
            });
        }

我认为第二次尝试可以解决动态加载问题，但它只是没有。

我得到的确切错误是：

Microsoft JScript运行时错误：无法设置属性的值＆＃39; currentDay＆＃39;：对象为null或未定义

然后转到代码

o.selectedDay=o.currentDay=t("a",n).html()

其中o =未定义

因此，如果您有任何建议，我可以随时使用它们。如果您需要其他信息，请询问！

Answer 1

我只是愚蠢，愚蠢，愚蠢。我刚刚完成了同样的事情。

这是一个范围/背景问题。一旦你进入每个函数，你就失去了$（this）上下文到该函数，即$（this）现在引用的函数不是你的选择器返回的对象。

幸运的是.each（）'可以帮助你将各个对象传递给函数。

$.ajax({
    url:        'patchdef.php',
    type:       "GET",
    dataType:   "html",
    beforeSend: function()
    {
        // LOADING
    },
    success:    function( data ) {
        area.html(data);
        $(".datePickerPatchDef").each(function (key, PatchDef) {
            var dateFormat = $(PatchDef).attr("dateFormatPatchDef").toLowerCase();
            $(PatchDef).datepicker({
                dateFormat: dateFormat,
                changeMonth: true,
                changeYear: true
            });
        });
    }
});

我95％确定这对你有用。我也赞成你的问题，以便洗漱:)）

编辑：我认为你可以将它保存在index.aspx

中

Answer 2

我面临同样的问题，这对我有用。希望这有助于

在Ajax Call之前禁用所有Datepickers

$(".datePicker").datepicker("destroy"); 
$(".datePicker").removeClass("hasDatePicker"); 
$(".datePicker").removeAttr("Disabled");

在可以添加或删除DOM元素的Ajax调用之后然后重新初始化Datepicker

$(".datePicker").datepicker({ dateFormat: "dd/mm/yy", showOn: "focus" });

你必须也称之为......这非常重要，因为这将重新绑定JQuery DOM

jQuery.datepicker.dpDiv.appendTo(jQuery('body'));

  var RemoveJQUIDatepicker = function () {
	
   
   
	$(".datePicker").datepicker("destroy");
	$(".datePicker").removeClass("hasDatePicker");
	$(".datePicker").removeAttr("Disabled");
   
};


var SetJQUIDatePicker = function () {
   
	$(".datePicker").datepicker({
		dateFormat: "dd/mm/yy",
		showOn: "focus"
		
	});

   
	
	jQuery.datepicker.dpDiv.appendTo(jQuery('body'));
   
}

//example Ajax Call Sequence
RemoveJQUIDatepicker();
	$.ajax({

		url: initURL,
		type: "Get",
		success: function (data) {
			
			SetJQUIDatePicker();
		  //Do Something
			

		},
		error: function () {
			//Do Something
			SetJQUIDatePicker();

		}


	});

通过ajax加载页面后，datepicker无法正常工作

2 个答案: