Geek asks and answers

Adding a date picker in a sub-form field

I am trying to add jquery-ui date picker to the fields of my nested application form, however, when I update the DOM with new fields, I do not see the date picker appear in the fields that were created. Here is the code that I work for the application.

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

Coffee sign for adding fields:

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

Function to add fields:

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 that I wrote to show datepicker:

$(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
3

click ".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 });
    });
});

datepicker $('. add_fields'). datepicker_update :

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

, DOM , , .datepicker, datepicker_update(), .datepicker datepickers. , , , datepicker, , jQuery ?

, datepicker_update , , datepickers , DOM. , ... , console.logs .

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

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 });
  })

.

0

More articles:


All Articles