Rails 3 не показывает JQuery Date Picker - PullRequest
Новая
       27

Rails 3 не показывает JQuery Date Picker

0 голосов
/ 27 сентября 2011

Я последовал за Railscast от RyanB , чтобы добавить jQuery date_picker в форму, и застрял на пару дней. Согласно инструкции, изменений всего три:

  1. Измените application.html.erb, включив в него jQuery и jQuery-ui (см. Мой application.html.erb ниже)

  2. Измените поле date_select на text для размещения jQuery. Я внес изменения в свой _form.html.erb:

    <% = f.text_field: born_in%>

  3. Добавьте в application.js следующее утверждение: 

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

Сложная проблема для меня заключается в том, что я использую FullCalendar (плагин JavaScript). По какой-то причине, если я добавлю что-нибудь в applicationaiton.js, FullCalendar не будет отображаться Поэтому мне нужно поместить определение функции в файл, который я назвал application_jquery_helper.js, и загрузить его после загрузки js-файлов FullCalendar.

Я сделал все это, но в моей форме текстовое поле является просто текстовым полем, и средство выбора даты jQuery не будет отображаться.

Интересно, что я сделал неправильно, что помешало появлению jQuery datepicker. Единственная причина, по которой я могу придумать, - это порядок, в котором я включил js-файлы в мой application.html.erb, но я не знаю, как это исправить.

Ниже мой довольно большой в 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" %>

Комментарии или предложения очень ценятся!

1 Ответ

0 голосов
/ 27 сентября 2011

Я полагаю, что вы пытаетесь получить доступ к элементу, когда DOM загружен не полностью.

Чтобы исправить эту проблему: 

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

Вы также можете посмотреть на jQuery .live() функциональность , если вам нужна поддержка "в будущем".

...