將日期選擇器添加到嵌套窗體字段

Question

我想添加jquery-ui日期選擇器到我的應用程序的嵌套窗體字段，但是當我用新字段更新DOM時，我沒有看到日期選擇器在創建的字段上。這是我爲應用程序工作的代碼。

<%= form_for(@load) do |f| %> 
    <%= f.error_messages %> 

    <%= f.fields_for :destinations do |builder| %> 
    <%= render "destination_fields", :f => builder %> 
    <% end %> 
    <p><%= link_to_add_fields " Add Destination", f, :destinations %></p> 
<% end %> 

_destination_fields.html.erb 
============================ 
<fieldset> 
    <%= f.text_field :arrival_date, :placeholder => "From:", :class => "datepicker" %> 
</fieldset> 

添加字段中的CoffeeScript的：

jQuery -> 

    $('form').on 'click', '.add_fields', (event) -> 
     time = new Date().getTime() 
     regexp = new RegExp($(this).data('id'), 'g') 
     $(this).before($(this).data('fields').replace(regexp, time)) 
     event.preventDefault() 

添加字段的功能：

def link_to_add_fields(name, f, association) 
    new_object = f.object.send(association).klass.new 
    id = new_object.object_id 
    fields = f.fields_for(association, new_object, child_index: id) do |builder| 
     render(association.to_s.singularize + "_fields", f: builder) 
    end 
    link_to(name, '#', class: "add_fields btn btn-primary icon-plus", data: { id: id, fields: fields.gsub("\n",""), :class => "datepicker" }) 
end 

我寫來顯示日期選擇器中的JavaScript：

$(function() { 
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }); 
}); 

$(function() { 
    $('.add_fields').on('click', function(){ 
     $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }); 
    }); 
}); 

我有對於堆棧溢出這個問題的其他解決方案，但他們的實現都沒有爲我的問題工作。正如你可以看到JavaScript檢查任何字段上的「datepicker」類，然後將datepicker類添加到它。我非常肯定你需要添加一個回調函數到點擊時添加新字段的按鈕，這是我所做的，但我不確定爲什麼我的函數不能正常工作。如果您需要更多的信息來幫助解決這個問題，我會很樂意提供。

解決方案編輯：

我改變了CoffeeScript的文件以下，使這項工作按照預期：

jQuery -> 
    datepicker_update = -> $("input.datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }) 

    $('form').on 'click', '.add_fields', (event) -> 
    time = new Date().getTime() 
    regexp = new RegExp($(this).data('id'), 'g') 
    $(this).before($(this).data('fields').replace(regexp, time)) 
    event.preventDefault() 
    datepicker_update() 

這是從兩個下方

Answer 1

你的回調上提供了聯合答案'.add_fields'按鈕的點擊事件是朝着正確方向邁出的一步。這是一個有點難受，你的模板代碼告訴我們，不明確HTML，但以下似乎是這個問題：

$(function() { 
    $('.add_fields').on('click', function(){ 
     //Below $(this) refers to $('.add_fields'). I assume that is a button and is not what you want to apply the datepicker to. 
     $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }); 
    }); 
}); 

你試圖在日期選擇器適用於$（」 add_fields，傳入三個。）。我通常做的是我創建了一個datepicker_update功能如下：

function datepicker_update(){ 
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }); 
} 

然後，每當我更新的新日期字段的DOM我要確保我給他們.datepicker類，然後我打電話datepicker_update（），它發現任何.datepicker字段並將其轉換爲datepickers。你可能想要包含一個測試來查看給定的字段是否已經應用了datepicker，儘管我相信jQuery UI可能已經這樣做了？

此外，最好包含datepicker_update和在一個事件回調中添加字段的過程，否則它可能會導致計時問題，因爲您試圖更新datepickers以獲取尚未完全進入DOM的字段。確保你的代碼以正確的順序執行...也許嘗試使用一些console.logs來檢查。

Answer 2

$(function() { 
    $('.add_fields').on('click', function(){ 
     $('input.datepicker').datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }); 
    }); 
}); 

Answer 3

聽click有時可能無法正常工作，因爲定製的監聽器和嵌套形式監聽工作同時進行。我們的自定義偵聽器可能會在嵌套表單之前完成。在這種情況下，最後添加的字段將不會被處理。

因此，而不是使用下面的代碼

$('.add_fields').on('click', function(){ 

使用fieldAdded事件的嵌套形式像下面觸發，

$(document).on('nested:fieldAdded', function(event){ 
    // this field was just inserted into your form 
    $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true }); 
    }) 

檢查here瞭解詳情。