Rails 3 does not show jQuery Date Picker
I followed a Railscast by RyanB to add jQuery date_picker to a form and and got stuck for a couple days now. According to the instruction, there are only three changes:
- Change application.html.erb to开发者_JAVA技巧 include jQuery and jQuery-ui (see my application.html.erb below)
Change date_select field to text to accommodate jQuery. I made the change in my _form.html.erb:
<%= f.text_field :born_in %>
Add to application.js the following statement:
$(function() { $("#spec_born_in").datepicker(); });
The tricky problem for me is that I am using FullCalendar (a JavaScript plugin). For some reason, if I add anything to applicaiton.js, FullCalendar won't show up. Therefore, I need to put the function definition to a file I called application_jquery_helper.js, and load it after loading FullCalendar's js files.
I have done all these but in my form, the text field is just a text field, and jQuery datepicker would not show up.
I wonder what I did incorrectly that prevented jQuery datepicker from showing up. The only reason I can think of is the order in which I included js files in my application.html.erb, but I don't know how to fix it.
Below is my rather big in 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" %>
Comments or suggestions are very much appreciated!
I believe you are trying to access an element when the DOM isn't fully loaded.
To correct this issue:
$(document).ready(function(ev) {
$("#spec_born_in").datepicker();
});
You can also look at jQuery's .live() functionality if you need "future" support.
加载中,请稍侯......
精彩评论