蠶繭自動完成模態填充動態字段兩次

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。