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>

如果我从/ events / new添加事件，表单会正确填充 From New Page但是如果我通过模态窗口添加它们，它会复制字段： Modal View

我已经验证了同时访问这两个页面的JSON没有重复，并且它显示的是相同的视图（/ events / new），但某些字段正在被复制。

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

$(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），实际上你在渲染模态时附加了两次事件，这就是它在模态页面上重复的原因。在处理模态的show事件时，最好使用范围选择器，如#newevent-modal input#event_name和#newevent-modal #eventattributes。

Cocoon自动完成模式两次填充动态字段

1 个答案: