title: Adding a date picker to a nested form field
body: <p>I am trying to add the jquery-ui date picker to my application's nested form fields, however when I update the DOM with the new fields I do not get the date picker to show up on the fields that were created. Here is the code that I have working for the application.</p>
  
  <pre><code>&lt;%= form_for(@load) do |f| %&gt;
    &lt;%= f.error_messages %&gt;
  
    &lt;%= f.fields_for :destinations do |builder| %&gt;
      &lt;%= render "destination_fields", :f =&gt; builder %&gt;
    &lt;% end %&gt;
    &lt;p&gt;&lt;%= link_to_add_fields " Add Destination", f, :destinations %&gt;&lt;/p&gt; 
  &lt;% end %&gt; 
  
  _destination_fields.html.erb
  ============================
  &lt;fieldset&gt;
    &lt;%= f.text_field :arrival_date, :placeholder =&gt; "From:", :class =&gt; "datepicker" %&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>The coffeescript for adding fields:</p>
  
  <pre><code>jQuery -&gt;
  
      $('form').on 'click', '.add_fields', (event) -&gt;
          time = new Date().getTime()
          regexp = new RegExp($(this).data('id'), 'g')
          $(this).before($(this).data('fields').replace(regexp, time))
          event.preventDefault()
  </code></pre>
  
  <p>The function for adding fields:</p>
  
  <pre><code>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 =&gt; "datepicker" })
  end
  </code></pre>
  
  <p>The javascript I have written to show the datepicker:</p>
  
  <pre><code>$(function() {
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
  });
  
  $(function() {
      $('.add_fields').on('click', function(){
        $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
      });
  });
  </code></pre>
  
  <p>I have seen other solutions for this problem on stack overflow but none of their implementations have worked for my problem. As you can see the javascript checks for any field with the "datepicker" class on it and then adds the datepicker class to it. I am pretty sure you need to add a callback function to the button that adds new fields when it is clicked, which is what I have done, but I am unsure why my function is not working properly. If you need any more information to help solve this problem I will gladly provide it.</p>
  
  <h1>Solution Edit:</h1>
  
  <p>I changed the coffeescript file to the following to make this work as expected:</p>
  
  <pre><code> jQuery -&gt;
     datepicker_update = -&gt; $("input.datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true })
  
    $('form').on 'click', '.add_fields', (event) -&gt;
      time = new Date().getTime()
      regexp = new RegExp($(this).data('id'), 'g')
      $(this).before($(this).data('fields').replace(regexp, time))
      event.preventDefault()
      datepicker_update()
  </code></pre>
  
  <p>This was a combination answer from the two provided below </p>