是什么导致 datepicker 无法使用 jquery 在 rails 3.1.3 中加载？答案

【问题标题】：What causes datepicker not loading in rails 3.1.3 with jquery?是什么导致 datepicker 无法使用 jquery 在 rails 3.1.3 中加载？
【发布时间】：2012-03-10 17:04:10
【问题描述】：

我们在带有 jquery 的 rails 3.1.3 应用程序中非常简单地使用了 datepicker。但是，有 2 个视图没有加载日期选择器。在所有其他视图上，datepicker 会毫无问题地自行加载。 datepicker 的所有 js 代码都在 application.js 文件中，其中一个（未加载）看起来像这样（带头文件）：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

$(function() {
   $("#src_plant_src_since").datepicker({dateFormat: 'yy-mm-dd'});
});

这是视图中的简单表单代码：

<%= f.input :src_since, :label => 'start date：', :hint => 'start src date', :as => :string %>

导致日期选择器加载到一个视图而不是另一个视图的原因可能是什么？非常感谢。

【问题讨论】：

检查没有加载 datepciker 的 html 视图源，确保所有 js 文件就位。之后检查 javascript 控制台错误，可能某些错误会阻止 js 的执行。
在firebug中，控制台没有错误。是否为 datepicker 加载了任何特定的 js 文件？
这里是页面的脚本头：/*! * jQuery JavaScript 库 v1.7.1 * jquery.com * * 版权所有 2011，John Resig * 根据 MIT 或 GPL 第 2 版许可获得双重许可。 * jquery.org/license * * 包括 Sizzle.js * sizzlejs.com * 版权所有 2011，Dojo 基金会 * 根据 MIT、BSD 和 GPL 许可证发布。 * * 日期：2011 年 11 月 21 日星期一 21:11:03 -0500 */
我们刚刚发现application.js中的更改无法生效。这可能就是为什么根本没有执行 datepicker 的修改代码的原因。这两个视图的旧日期选择器代码不起作用。
在 public/assets/ 下删除 application.* 后，日期选择器按预期工作。 rake assets:precompile 也可以。

标签： javascript jquery ruby-on-rails datepicker

【解决方案1】：

宝石文件

group :assets do
    gem 'jquery-ui-rails'
end

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all 
//= require_tree .

或者你可以只加载 datepicker js。喜欢：

//= require jquery.ui.datepicker

【讨论】：

【解决方案2】：

试试这个

安装

gem "jquery_datepicker"

然后这是你的形式

<%= f.label :date %>
 <%= f.datepicker :date, :dateFormat => 'dd MM, yy',  :showOn => "both", :buttonImage => "../assets/calendar.gif", :buttonImageOnly => true, :changeMonth => true, :changeYear => true, :placeholder => "Click on the textfield/Calender" %><br/>

你应该把它放在你的布局中的 application.html 中

<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css", "application" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" %>

【讨论】：