Question

我看过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; ">

非常感谢任何帮助。谢谢！

Answer 1

首先，你可以写这个来显示从头开始渲染的datepicker字段：

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

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

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

请注意removeClass('hasDatepicker')：没有它，javascript创建的datepicker字段未正确初始化。

Answer 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'）。

带有nested_forms Gem的jQuery UI DatePicker

2 个答案: