蚕茧自动完成模态填充动态字段两次

Question

我一直在努力跟踪基本活动，我希望扩大（这是一个人生的数据跟踪应用程序为自己）一个Rails应用程序。我有一个EventTemplate类，它存储EventTemplateAttributes。创建新事件时，它使用rails-jquery-autocomplete来搜索现有模板并使用散列填充表单的属性。以下是一个自动完成功能的代码：

def autocomplete_eventtemplate_name 
    respond_to do |format| 
     format.json { 
      @eventtemplates = Eventtemplate.where("name like ?", "%#{params[:term]}%") 

      render json: json_for_autocomplete_eventtemplates(@eventtemplates) 
     } 
    end 
end 
def json_for_autocomplete_eventtemplates(eventtemplates) 
    eventtemplates.collect do |eventtemplate| 

     attributes = Hash.new 
     unless eventtemplate.templateattributes.empty? 
      eventtemplate.templateattributes.each do |templateattribute| 
       attributes[templateattribute.id] = [templateattribute.name,templateattribute.value,templateattribute.unit] 
      end 
     end 
     hash = {"id" => eventtemplate.id.to_s, "value" => eventtemplate.name,"eventattributes" => attributes} 

     hash 
    end 
end 

这里是我的形式：

<%= simple_form_for(@event) do |f| %> 
    <% if @event.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2> 
     <ul> 
     <% @event.errors.full_messages.each do |message| %> 
      <li><%= message %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 
    <div class="field"> 
    <% if @event.new_record? %> 
     <% #,{:class=>"form-control"} %> 
     <%= f.autocomplete_field :name, autocomplete_eventtemplate_name_events_path,{:class => "form-control"} %> 
    <% else %> 
     <%= f.label :name %><br> 
     <%= f.text_field :name, class: 'form-control' %> 
    <% end %> 
    </div> 
    <div id="#find-subj"></div> 
    <table class="table-striped table table-bordered"> 
    <thead> 
     <td>Name</td> 
     <td>Value</td> 
     <td>Unit</td> 
     <td></td> 
    </thead> 
    <tbody id=eventattributes> 
     <tr> 
     <%= f.simple_fields_for(:eventattributes, :wrapper => false) do |tattribute| %> 
      <% if modal == false%> 
      <%= render 'eventattribute_fields', :f => tattribute %> 
      <% end %> 
     <% end %> 
     </tr> 
    </tbody> 
    </table> 
    <div class="links"> 
    <%= link_to_add_association f, :eventattributes, :"data-association-insertion-node" => "tbody#eventattributes", :"data-association-insertion-method" => "append", class: 'btn btn-info' do %> 
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
    <% end %> 
    </div></br> 
    <div class="actions"> 
    <%= f.submit class: 'btn btn-primary'%> 
    <%= link_to 'Cancel', events_path, class: 'btn btn-warning' %> 
    </div> 
<% end %> 

这里是_eventattribute_fields：

<tr class='nested-fields table'> 
    <td><%= f.input_field :name ,class: 'form-control'%></td> 
    <td><%= f.input_field :value, class: 'form-control' %></td> 
    <td><%= f.input_field :unit, class: 'form-control' %></td> 
    <td><%= link_to_remove_association f, class: 'btn btn-danger' do %> 
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    <% end %></td> 
</tr> 

如果我从/事件/新添加事件形式填充正确 From New Page然而，如果我通过一个模式窗口添加它们，它重复字段： Modal View

我验证来两个页面的JSON不重复，而且它显示了同样的观点（/事件/新），但不知何故领域正在复制。

编辑 随着进一步的调试，我推断，问题发生在茧脚本我必须填写表单。这两种方法分别用于/ events/new和模态窗口。如果可以使模式正常工作，则不需要保留新页面。检查控制台输出，我已经看到每个cocoon：插入后功能都只能在它们各自的页面上触发。他们每个属性也只会触发一次。

$(function() { 

    var eventtemplate_array; 
    var modal = false; 

    $('#event_name').bind('railsAutocomplete.select', function(event, data){ 
    //$('#event_name').bind('change', function(event, data){ 
     console.debug("Template selected..."); 
     attributes = data.item.eventattributes; 
     console.debug("Removing existing attributes..."); 
     $('.event_eventattribute_destroy').click(); 
     console.debug("Adding attributes..."); 
     for(var id in attributes) { 
      eventtemplate_array = attributes[id]; 
      $('.add_fields').click(); 
     } 
     console.debug("Done adding all attribute..."); 
    }); 
    if(!modal){ 
    $('#eventattributes').bind('cocoon:after-insert', function(e, eventattribute) { 
     console.debug(modal); 
     eventattribute[0].getElementsByTagName('input')[0].value = eventtemplate_array[0]; 
     eventattribute[0].getElementsByTagName('input')[1].value = eventtemplate_array[1]; 
     eventattribute[0].getElementsByTagName('input')[2].value = eventtemplate_array[2]; 
    });} 

    $('#newevent-modal').on('shown.bs.modal', function() { 
     modal = true; 
    $('input#event_name').bind('railsAutocomplete.select', function(event, data){ 
     attributes = data.item.eventattributes; 
     $('.event_eventattribute_destroy').click(); 
     for(var id in attributes) { 
      console.debug(id); 
      eventtemplate_array = attributes[id]; 
      $('.add_fields').click(); 
     } 
     eventtemplate_array = ["","",""]; 
    }); 
    $('#eventattributes').bind('cocoon:after-insert', function(e, eventattribute) { 
     console.debug(modal); 
     eventattribute[0].getElementsByTagName('input')[0].value = eventtemplate_array[0]; 
     eventattribute[0].getElementsByTagName('input')[1].value = eventtemplate_array[1]; 
     eventattribute[0].getElementsByTagName('input')[2].value = eventtemplate_array[2]; 
    }); 
}); 


}); 

Answer 1

真的很复杂的问题要了解。只是让我理解正确：您正在使用“自动完成”gem来获取模板中的字段列表，对吗？ （只需使用简单的ajax调用？）然后你使用这个json，在javascript中构建表单。所以在这个脚本中，不知怎的，你创建了双打，对吧？这似乎是一个非常复杂的方式，为什么不只是渲染表单服务器端呢？

无论如何，既然你的id对于两页（input#event_name）都是一样的，你实际上是在模态被渲染时连接两次事件，这就是为什么它在模态页面上被复制的原因。在处理模态的显示事件时，更好地使用范围选择器，如#newevent-modal input#event_name和#newevent-modal #eventattributes。