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 类添加到其中。我很确定您需要向单击时添加新字段的按钮添加一个回调函数，这就是我所做的，但我不确定为什么我的函数无法正常工作。如果您需要更多信息来帮助解决这个问题，我很乐意提供。

解决方案编辑：

我将咖啡脚本文件更改为以下内容以使其按预期工作：

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

这是下面提供的两者的组合答案

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 和添加字段的过程，否则它可能会导致您尝试更新尚未完全进入 DOM 的字段的日期选择器的时间问题。确保您的代码以正确的顺序执行...也许尝试使用一些 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 回答