带有nested_forms Gem 的 jQuery UI DatePicker答案

【问题标题】：jQuery UI DatePicker with nested_forms Gem带有nested_forms Gem 的 jQuery UI DatePicker
【发布时间】：2011-09-27 22:23:45
【问题描述】：

我查看了this，但这并没有解决我的问题，但情况相同。 jQuery 加载得很好。

这是我的“nested_form”：

<%= f.fields_for :events do |event_form| %>
<%= event_form.text_field :name %>
<%= event_form.text_field :date, :class => 'event_date' %>
<%= event_form.text_field :email %>
<%= event_form.text_field :place %>
<%= event_form.link_to_remove "Remove Event", :class => "remove_task" %>
<% end %>

这是 JS：

jQuery(document).ready(function($) {
  $('.event_date').each(function() {
    $(this).datepicker();
  });   
});

最后是生成的 html。你可以看到 jQuery UI 为 DatePicker 添加了它的类（hasDatepicker）：

<input class="event_date hasDatepicker" id="group_events_attributes_new_1317162040750_date" name="group[events_attributes][new_1317162040750][date]" size="30" type="text" style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; ">

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-3 jquery-ui

【解决方案1】：

首先，你可以写这个来显示从头开始渲染的日期选择器字段：

$(function() {
    $('.event_date').datepicker();
});

但是对于nested_forms通过javascript创建的字段，必须在添加字段（see documentation here）后拦截form元素触发的nested:fieldAdded事件。你可以通过这种方式完成它：

$(function() {
    $('form').live('nested:fieldAdded', function(event) {
        $(event.field).find('.event_date').removeClass('hasDatepicker').datepicker();
    });
});

注意removeClass('hasDatepicker')：没有它，由javascript动态创建的日期选择器字段将无法正确初始化。

【讨论】：

谢谢你...但我仍然无法使用它。
它永远不起作用？还是只有通过js添加的字段？你确定jquery和ui都加载正确了吗？
您可以更改 onload 选择器以使用可见选择器 $('.event_date:visible').datepicker(); 而不是删除类这样你的隐藏元素就不会得到那个 hasDatepicker 类。

【解决方案2】：

我现在正在表单中做同样的事情。这是我使用 jQuery 1.7 的示例。

(function ($) {
    var app = {}, opts = { dateFormat: 'yy-mm-dd' }, dateSelector = 'input.event_date:visible';
    app.init = function(){
        $(window).on('nested:fieldAdded', onFieldAdded);
        $(dateSelector).datepicker(opts);
    };
    function onFieldAdded(e) {
        e.field.find(dateSelector).datepicker(opts);
    }
    $(app.init);
    return app;
} (jQuery));

对于旧版本的 jQuery，您可以在 init 函数中使用以下内容。

$(window).bind('nested:fieldAdded', onFieldAdded);

我所做的更好的是，重复更少（选择器的字符串），并且我不对隐藏元素调用 datepicker，因此无需对通过nested_forms 添加的元素调用'removeClass('hasDatepicker')。

【讨论】：