2

アプリケーションのネストされたフォームフィールドに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>

フィールドを追加するためのコーヒースクリプト：

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()

これは、以下の2つの回答を組み合わせたものです。

4

3 に答える 3

2

'.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フィールドを検索し、それらをdatepickerに変換します。jQuery UIがすでに適用している可能性があると思いますが、特定のフィールドにすでに日付ピッカーが適用されているかどうかを確認するためのテストを含めることをお勧めします。

さらに、datepicker_updateとフィールドを追加するプロセスを1つのイベントコールバックに含めることをお勧めします。そうしないと、まだDOMに組み込まれていないフィールドのdatepickerを更新しようとしているタイミングの問題が発生する可能性があります。コードが正しい順序で実行されていることを確認してください...おそらく、いくつかのconsole.logsを使用して確認してみてください。

于 2012-05-30T22:07:38.690 に答える
1

カスタムリスナーとネストされたフォームリスナーは同時に機能するため、リスニングが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 });
  })

詳しくはこちらをご覧ください。

于 2014-12-11T14:10:02.510 に答える
0 
$(function() {
    $('.add_fields').on('click', function(){
      $('input.datepicker').datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
    });
});
于 2012-05-30T22:09:16.310 に答える