Rails 3 不显示 jQuery 日期选择器答案

【问题标题】：Rails 3 does not show jQuery Date PickerRails 3 不显示 jQuery 日期选择器
【发布时间】：2011-09-27 02:09:59
【问题描述】：

我按照Railscast by RyanB 将 jQuery date_picker 添加到表单中，现在卡住了几天。按照说明，只有三个变化：

更改 application.html.erb 以包含 jQuery 和 jQuery-ui（请参阅下面的 application.html.erb）
将 date_select 字段更改为文本以适应 jQuery。我在 _form.html.erb 中进行了更改：

在 application.js 中添加以下语句：

$(function() {
$("#spec_born_in").datepicker();
  });

对我来说棘手的问题是我使用的是 FullCalendar（一个 JavaScript 插件）。出于某种原因，如果我向 applicaiton.js 添加任何内容，FullCalendar 将不会出现。因此，我需要将函数定义放到一个名为application_jquery_helper.js的文件中，并在加载完FullCalendar的js文件后加载。

我已经完成了所有这些，但是在我的表单中，文本字段只是一个文本字段，jQuery datepicker 不会显示出来。

我想知道我做错了什么导致 jQuery datepicker 无法显示。我能想到的唯一原因是我在application.html.erb中包含js文件的顺序，但我不知道如何修复它。

下面是我在application.html.erb中比较大的：

  <head>
<%= csrf_meta_tag %>
<%= render 'layouts/stylesheets'%>
<%= javascript_include_tag :defaults %>
<!-- <%=stylesheet_link_tag'blueprint/screen',:media=>'screen'%> 
<%=stylesheet_link_tag'blueprint/print',:media=>'print'%> -->
<%= stylesheet_link_tag 'formtastic', 'formtastic_changes', :cache => "base" %>

<%= 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", "application" %>

<%= stylesheet_link_tag "fullcalendar.css" %>
<%= stylesheet_link_tag "application.css" %>
<%= javascript_include_tag "jquery.js" %>
<%= javascript_include_tag "jquery.rest.js" %>
<%= javascript_include_tag "rails.js" %>
<%= javascript_include_tag "application.js" %>
   <!-- these are needed for the calendar. -->
 <%= javascript_include_tag "jquery-ui-1.8.11.custom.min.js" %>
 <%= javascript_include_tag "fullcalendar.js" %>
 <%= javascript_include_tag "calendar.js" %>
 <%= javascript_include_tag "application_jquery_helper.js" %>

非常感谢您的意见或建议！

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui datetime formtastic

【解决方案1】：

我相信您正在尝试在 DOM 未完全加载时访问元素。

要纠正这个问题：

$(document).ready(function(ev) {
  $("#spec_born_in").datepicker();
});

如果您需要“未来”支持，也可以查看jQuery's .live() functionality。

【讨论】：

谢谢亚当。在我的例子中，是原型和 jQuery 之间的冲突导致了这个问题。
啊，是的，有时他们玩得不好。