如何让 jQuery UI datepicker 在通过 ajax 请求加载的表单中正常工作答案

【问题标题】：How to get jQuery UI datepicker to work correctly in a form that's loaded via ajax request如何让 jQuery UI datepicker 在通过 ajax 请求加载的表单中正常工作
【发布时间】：2014-08-19 05:02:15
【问题描述】：

我有一个日历页面，并且每天都有一个链接，通过 ajax 将表单加载到引导弹出窗口中。在那个 ajax 表单中，我有一个开始日期字段和一个结束日期字段。在加载表单然后创建并显示弹出框后，我立即使用 jQuery 通过 jQuery 将 datepicker 添加到每个日期字段：

$( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "mm/dd/yy" }); //add the datepicker

它显然成功地将日期选择器绑定到字段，因为当我单击这些字段中的任何一个时，日期选择器就会出现。

但是，当我选择日期时，我在控制台中收到以下错误：

[Error] TypeError: 'undefined' is not an object (evaluating '= inst.currentDay = $("a", td).html()')
_selectDay (jquery.ui.datepicker.js, line 977)
selectDay (jquery.ui.datepicker.js, line 1568)
dispatch (jquery.js, line 5096)
handle (jquery.js, line 4767)

我已经阅读了很多关于此的内容，这似乎是因为我绑定 datepicker 的输入字段是在 DOM 最初加载后作为 ajax 请求的一部分加载的。这是有道理的，因为我使用完全相同的方法将 datepicker 绑定到其他页面上，但在其他页面上，我附加 datepicker 的表单元素是初始页面加载的一部分。在这些页面中，一切正常。

那么，我遇到这个问题是否正确，因为带有输入的表单是异步加载的？如果是这样，我该怎么做才能在以这种方式加载的表单元素上正确使用日期选择器？

更新

这里有一些关于我目前具体如何做的细节。根据@Mandeep，我正在这样做。这是构建弹出框并随后添加日期选择器的代码 (new.js.erb)：

$('#newEvent').empty(); //empty any previous popover content from its container
$('#<%= @event.start.to_date.strftime("%Y-%m-%d") %>').find('a.new-event-link').popover('destroy'); //destroy any popover currently bound to the link
$('#<%= @event.start.to_date.strftime("%Y-%m-%d") %>').find('a.new-event-link').popover({ 
    trigger:'manual', placement: 'left', html:true, title:'New Event', content:'<%= j render("new_popover") %>', container:"#newEvent"
}); //create the popover and render _new_popover.html.erb in the contents. This is the form with the dates
$('#<%= @event.start.to_date.strftime("%Y-%m-%d") %>').find('a.new-event-link').popover('show'); //show the popover
$( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "mm/dd/yy" }); //add the datepicker
$('#cancelEvent').click(function(){
    $('#<%= @event.start.to_date.strftime("%Y-%m-%d") %>').find('a.new-event-link').popover('hide');
}); //hide the popover on clicking cancel

如前所述，这一切都可以正常工作：1) 创建弹出框并在其中呈现表单，以及 2) 附加日期选择器。但问题在于选择日期。那是我得到错误的时候。

【问题讨论】：

您是否尝试过在元素附加到 dom 后启用 datepicker 而不是准备好？

标签： jquery ruby-on-rails ajax twitter-bootstrap datepicker

【解决方案1】：

好吧，我是个笨蛋。它本质上与 ajax 请求无关。相反，问题在于原始页面使用了一个带有隐藏字段的表单（实际上很多——日历中的每一天），其提交生成了 ajax 弹出表单。这些隐藏字段让 rails 知道它应该预填充 ajax 表单的日期。事实证明，这些隐藏字段与 ajax 表单中的日期输入共享相同的 id。那是扔掉日期选择器。我稍微改变了构建请求表单的方式，使其不使用相同的 ID。现在一切正常。

【讨论】：

【解决方案2】：

我建议将 datepicker 分配放在您从 AJAX 调用中获得的 HTML 中。我就是这样做的，它对我有用。我知道这有点混乱，但只需添加：

<script type="text/javascript">
    $( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "mm/dd/yy" }); //add the datepicker
</script>

到您要检索的 HTML 的末尾应该可以解决问题。在 javascript 方面（在将内容添加到网页之前）在返回的数据上添加该功能也可能有效，我根本没有尝试过。

如果您遇到困难，请告诉我，我会提供代码示例。

【讨论】：

尝试了这个而不是我当前的方法（我将在上面更新更多细节），我仍然得到相同的结果：Datepicker成功绑定到输入字段（当我点击时我得到了日期选择器字段），但选择日期会产生上述错误。

【解决方案3】：

为了将 Javascript 排除在 HTML 页面之外（一个很好的做法），您可以在单独的 Javascript 文件中这样做：

$(document).ready(function() {
  $(document).on("focus", "[class~='datepicker']", function(e){
    $(this).datepicker({ changeMonth: true, changeYear: true, dateFormat: "mm/dd/yy" }); //add the datepicker
  });
});

这就是我在项目中的做法。

【讨论】：

尝试了这个而不是我当前的方法（在上面添加详细信息）。仍然产生相同的结果：单击字段时 datepicker 正确显示（因此已成功附加），但单击日期会产生相同的错误。我假设这里的意图是在每次文档成功完成更新时运行就绪函数？正如我所说，绑定日期选择器效果很好，但它选择了一个产生错误的日期。
能否分享一下popover的HTML内容。它可能有助于调试此问题。
想通了。这是一个愚蠢的id 冲突。我在上面发布了答案。谢谢。

【解决方案4】：

你有两个选择：

一个。 通过 ajax 请求加载表单后调用您的 js。如果您使用 rails 方式来执行 ajax，那么在您的 method.js.erb（这里的方法将是您用于调用 ajax 请求的控制器方法）中，您可以在底部编写此代码

$( ".datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: "mm/dd/yy" }); //add the datepicker

b.您可以使用 Jquery live 或 on 事件 处理程序并将您的 js 代码放在 application.js 或其他一些 js 文件中，并在 application.js 中要求该文件

$(document).on("click",".datepicker",function(e){
  $(this)..datepicker({ changeMonth: true, changeYear: true, dateFormat: "mm/dd/yy" }); //add the datepicker
  e.preventDefault();
});

【讨论】：