Question

我有一个JQueryUI datepicker定义如下：

$(function() {
  $(".visit_date").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd"
  });
});

生成Datepicker文本框的视图代码是

<td><%= f.label :visit_date %></td>
<td><%= text_field_tag :visit_date, @visit.visit_date, :class => 'visit_date'

，渲染时，视图在标签之间生成，如下所示：

<div id="action_window">
   (rendered HTML to be acted on by user) 
</div>

为什么Javascript选择器“.visit_date”没有与此视图挂钩？换句话说，没有“action_window”标签，它曾用于工作。我的想法是“.visit_date”会匹配任何类“visit_date”。

====================== 2012年11月7日更新。 Javascript代码：

$(function() {
  $("#visit_date").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd"
});

}）;

用户按下按钮的原始位置：

<%= link_to "Add Visit", new_client_visit_path(@client), :remote => true, :class => "btn btn-primary btn-large" %>

在VisitsController中：

respond_to do |format|
  format.html
  format.js { }
end

在views / visits / new.js.erb中：

$('#action_window').html('<%= escape_javascript render(:partial => "new") %>');
$('#action_window').show;

（＃action_window是客户端索引视图中的div）

在views / visits / _new.html.erb中：

<%= render "form" %>
<%= link_to "Cancel", @client, :class => "btn btn-primary btn-large" %>

在views / visits / _form.html.erb中：

%= form_for [@client, @visit] do |f| %>
<td><%= text_field_tag :visit_date, @visit.visit_date, :class => 'visit_date' %>

我无法让Datepicker工作，大概是因为创建“新访问”视图的HTML被呈现，并且如果没有将“hasDatepicker”添加到类中，JQueryUI就无法关联它。

Answer 1

我认为你对类选择器的假设是正确的。根据我的经验，datepicker应该连接到你选择的class / id，而不管div包含什么。我会检查这些事情：

确保错误地没有两个jQuery标记。我这样做了，日期选择器不起作用。
在此代码破解之前是否有任何javascript代码？我认为只要遇到第一个错误，JS执行就会停止。我会在Chrome中打开页面，右键单击Inspect Element，然后查看Console以查看是否存在任何JS错误。

这些建议是基于您的rails代码生成class =“visit_date”的输入标记的假设。

Answer 2

当您动态添加想要成为日期选择器的元素时，原始静态页面包含这个jquery以使一些元素成为datepicker：

$（ 'VISIT_DATE。'）日期选择器（）;

当新元素被添加，并且它具有class ='visit_date'时，它将不是一个日期选择器，除非您在其上调用jquery的数据贴图。

因此，如果您使用new.js.erb添加动态datepicker元素，则可以执行以下操作：

$('#action_window').html('<%= escape_javascript render(:partial => "new") %>');
$('.visit_date').datepicker();

如何修复损坏的JQueryUI Datepicker

2 个答案: