带有嵌套资源Rails 3.1的JQuery Datepicker

时间:2012-01-06 09:46:46

标签: ruby-on-rails-3.1 datepicker nested-forms

我尝试在使用Rails 3.1运行的应用程序中使用datepicker功能。如果我在application.js文件中使用以下内容,我就可以使用它了:

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

现在我有一个嵌套的资源并尝试了很多东西来使它也适用它,但没有任何成功。通过一些研究,我发现可能的解决方案是:

  $(function(){
    $('.datePicker').datePicker();
  });

但是如果我将这个类添加到我的字段中,它甚至不再适用于exam_deadline。我不太熟悉Javascript,我希望有人可以告诉我,我做错了什么。 这是我的观点和.js的片段: JS:

function remove_fields (link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).closest(".fields").hide();    
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g");
  $(link).parent().before(content.replace(regexp, new_id));
}

观点: 考试:

<%= semantic_form_for @exam do |f| %>
<%= f.inputs do%>   
<%= f.input :deadline,  :as => :string, 
       :start_year => Time.now.year, :label => "Anmeldefrist", 
       :order =>[:day,:month,:year], :class => 'datePicker'%>
<% end %>   
<%= f.semantic_fields_for :examdates do |builder|%>
  <%= render "examdate_fields", :f => builder %>
<% end %>
<p>
  <%= link_to_add_fields "Termin hinzufügen", f, :examdates %>
</p>

<%end%>

examdate_fields:

<%= f.inputs :class => 'fields' do%>
<%= f.input :date, :label =>"Termin", 
    :as => :string,
    :order =>[:day,:month,:year], :start_year => Time.now.year,
    :class=>"datePicker" %>
<%= link_to_remove_fields "Entfernen", f %>
<%end%>

我的application.html.erb:

<!DOCTYPE html>
<html>
  <head>
   <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
    <%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css",
    "application", "formtastic.css", "formtastic_changes.css" %>
    <%= 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" %>
    <%= csrf_meta_tag %>
    <%= yield(:head) %>
  </head>
...

提前感谢每一个小小的提示!

2 个答案:

答案 0 :(得分:0)

只是一个快速猜测。您在尝试时使用单引号和类名。

如果这不能解决问题,我会尝试坚持使用ID而不是类名(我不知道datepicker是否仍然可以使用类选择器正确引用它们)。您只需要为每个输入和动态创建的javascript(每个动态创建的输入的日期选择器)而不是静态js文件使用另一个Id。

答案 1 :(得分:0)

好的,经过大量尝试后我得到了它。我将js改为:

$(function(){
  $(".datePicker").datepicker();
  $('#ui-datepicker-div').hide();
  $.datepicker._defaults.dateFormat = 'dd M yy' 
});

和我的观点:

<%= f.input :date, 
  :label =>"Termin", 
  :as => :string,
  :order =>[:day,:month,:year], 
  :start_year => Time.now.year, 
  :input_html => {:class =>"datePicker" }%>

现在它有效:)我希望它可以帮助那些为同样的问题而斗争的人。