为啥 datepicker 没有以 Rails 3 形式显示

Posted 2023-05-09

【中文标题】为啥 datepicker 没有以 Rails 3 形式显示

【英文标题】：Why datepicker does not show up in Rails 3 form为什么 datepicker 没有以 Rails 3 形式显示

【发布时间】：2011-11-26 13:15:40

【问题描述】：

我无法弄清楚为什么 jQuery datepicker 没有出现，即使我的应用程序上运行了 jQuery。这是我所做的：

我得到了一个包含

的 Rails 表单

  <div id="born_in">
   <%= f.text_field :born_in %><br />
   </div>

我在 application.html.erb 的头部包含了 jQuery、jQuery-UI、CSS

<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" %>

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js",
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" %>     

我还有application.js，说明我的选择器不是nil：

alert($("#born_in").length)  

返回 1

我试过了：

$("#born_in").datepicker("show")

但它没有显示任何内容。 那么为什么我没有看到 datepicker()？此版本的 jquery-UI 的 datepicker 是否存在错误？我应该如何测试这个功能是否包含在我的应用程序中？

谢谢。

【参考方案1】：

它是事先初始化的吗？如，你打电话了吗

$("#born_in").datepicker();

该代码之前的某个位置？如果没有，则不需要“显示”，只需运行不带参数的方法即可。

【讨论】：

嗨 Kennypu，我确实在 application.js 中调用了它（它包含在 application.html.erb 的头文件中）。但是日期选择器没有出现。

【参考方案2】：

Rails 决定在 id 中添加带有控制器名称的表单输入。 例如，我的控制器名称是“Testjqueryui”，在 _form 部分中，生成了以下（很像你的）：

<%= f.text_field :date %>

生成的 HTML（在嵌入式 ruby​​ 运行后）的 id 为：“testjqueryui_date”。

所以，我的建议是检查生成的字段的 id，因为它可能带有控制器的名称。

我把它放在 application.js 文件中：

$(function() 
    $( "#testjqueryui_date" ).datepicker();
);

希望这会有所帮助！

【讨论】：

谢谢，Fishz。我认为如果您指定 那么 jQuery 可以正确识别该元素（即，无需为对象名称添加前缀）

@AdamNYC：也许我不清楚。您最初问题中的 是不必要的。日期选择器附加到表单输入（文本框）。该文本框的 ID 是需要在 application.js 文件中调用的。我相信，由于您使用的是标准 rails 表单助手<%= f.text_field :born_in %>，因此创建的 text_field 将具有 _born_in 的 id。您的测试，alert($("#born_in").length) 肯定会返回 true，因为它针对您的领域周围不必要的 div。希望这会有所帮助。

感谢您的跟进。在尝试明确指定 div id 之前，我确实尝试了您建议的 $(#my_class_born_in) 方式。两种方式，日期选择器都不会显示。 :(

@AdamNYC：嗯，这很有趣。您确定浏览器正在加载所需的 javascript 文件吗？

通过在 app/views/layouts/application.html.erb 中包含 <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" > 解决了我的问题

【参考方案3】：

您只需要使用 jQuery 选择器来查找您希望显示为日期选择器的所有字段。一种方法是为 datepicker 字段提供一个特定的 css 类，如下所示：

<div id="born_in">
    <%= f.text_field :born_in, :class => "date" %>
</div>

然后，在您的 application.js 文件中（或您想要的位置），只需写：

$(function() 
    $('input.date').datepicker();
);

您也可以使用特定元素的 id 来代替 css 类。你知道要求。 希望这是有用的。