具有nested_forms宝石的jQuery UI DatePicker [英] jQuery UI DatePicker with nested_forms Gem

问题描述

我查看了此，但是没有解决我的问题，但情况相同. jQuery加载就好了.

I've looked at this but this didn't solve my issue but it's the same circumstance. jQuery is loaded just fine.

这是我的嵌套表格":

<%= 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):

Lastly here's the html that's generated. You can see the jQuery UI adds it's class (hasDatepicker) for DatePicker:

<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; ">

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

Any help would be greatly appreciated. Thanks!

推荐答案

我现在正以某种形式做同样的事情.这是我的jQuery 1.7示例.

I'm doing the same thing in a form right now. Here's my example with 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函数中使用以下内容.

For older versions of jQuery, you would use the following in the init function.

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

关于我正在做的事情，更好的是减少了重复(选择符的字符串)，并且我不对隐藏元素调用datepicker，因此无需对通过nested_forms添加的元素调用'removeClass('hasDatepicker').

What's nicer about what I'm doing, is less repetition (strings for selectors) and I don't call datepicker on hidden elements, so there's no need to call 'removeClass('hasDatepicker') on elements added through nested_forms.

这篇关于具有nested_forms宝石的jQuery UI DatePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！