jQuery UI DatePicker with nested_forms Gem

我看過this但這並沒有解決我的問題，但它是相同的情況。 jQuery加載得很好。jQuery UI DatePicker with nested_forms Gem

這裏是我的 '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; ">

任何幫助將不勝感激。謝謝！

來源

2011-09-27 Marc

首先，你可以只寫這個用於顯示從一開始就呈現的日期選擇字段：

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

但對於通過JavaScript通過nested_forms產生的場，你必須攔截由form元素觸發nested:fieldAdded事件添加字段後（see documentation here）。您可以通過這種方式完成它：

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

注意removeClass('hasDatepicker')：沒有它，由JavaScript dinamically創建的日期選擇字段不正確初始化。

來源

2011-09-29 08:18:21

感謝您的這一點...但我仍然沒有得到它與此工作。 – Marc

它從來沒有工作？或者只有通過js添加字段？你確定jquery和ui加載正確嗎？ –

而不是刪除類，您可以更改您的onload選擇器以使用可見選擇器$（'。event_date：visible'）。datepicker（）;這樣你的隱藏元素將無法獲得hasDatepicker類。 – kayluhb

我現在正在做一樣的事情。這裏是我用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);

什麼是關於我在做什麼更好，少重複（對選擇字符串），我不叫日期選擇器上的隱藏要素，所以沒有必要再調用「removeClass（」 hasDatepicker'）上的元素通過nested_forms添加。

來源

2011-11-10 22:05:12 kayluhb

jQuery UI DatePicker with nested_forms Gem

回答

相關問題