在rails 3.0.9中具有动态嵌套表单的jquery.Tokeninput

Question

我试图在我的表单应用程序中使用 jquery Tokeninput 插件来自动完成 pouporse。

问题是，在我的 java 脚本中，上下文 ID 是动态生成的，所以我不知道如何指定它工作，即使我在视图字段中使用参数 :id，它也无法识别。

我尝试将它与单个非动态字段一起使用并且工作得很好。 问题在于编辑视图。 当我开始编辑时，每个字段都会显示该项目的所有结果。

所以如果我有 3 个字段，则 3 显示所有 3 个元素。

我的观点是

/views/comps/new.html.erb

<h1>Cadastrar nova composicao:</h1>
<%= form_for(@comp) do |f| %>
  <%= render 'fields', :f => f %>
  <div class="actions">
    <%= f.submit "Salvar" %>
  </div>
<% end %>

/views/comps/_fields.html.erb

<%= render 'shared/error_messages', :object => f.object %>
<br>
<table class="field">
<tr>
        <td><%= f.label :nome, "Nome" %></td>
        <td><%= f.text_field :nome %></td>

        <td><%= f.label :projetoorigem_id, "Projeto de origem" %></td>
        <td><%= f.text_field :projetoorigem_id %></td>
</tr>
<tr>
        <td><%= f.label :user_id, "Autor" %></td>
        <td><%= f.text_field :user_id %></td>

        <td><%= f.label :unidade_id, "Unidade" %></td>
        <td><%= f.text_field :unidade_id %></td>
</tr>
<tr>
        <td><%= f.label :tipo, "Tipo" %></td>
        <td><%= f.text_field :tipo %></td>

        <td><%= f.label :valor, "Valor" %></td>
        <td><%= f.text_field :valor %></td>
</tr>
</table>
<div id="add" class="none">
Insumos da composicao
</br>
<ol>
<div>
<%= link_to_add_fields (image_tag "add.jpg"), f, :insumos_comp_rels %>
        <%= f.fields_for :insumos_comp_rels do |builder| %>
                <%= render "insumos_comp_rel_fields", :f => builder %>
        <% end %>
</div>
</div>
</ol>

/views/comps/_insumos_comp_rel_fields.html/erb

<li class="fields">
<%= link_to_remove_fields (image_tag "delete.jpg"), f %>
<%= f.text_field :insumo_id, :id => "insumo_id" %>
<%= f.collection_select(:clifor_id, Clifor.all, :id, :nome_fantasia)%>
<%= f.collection_select(:modelo_id, Modelo.all, :id, :nome)%>
<%= f.collection_select(:unidade_id, Unidade.all, :id, :simbolo)%>
<%= f.text_field :valor %>
<%= f.text_field :quantidade %>
</li>

jQuery 文件是：

/application.js

function remove_fields(link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).closest(".fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).parent().after(content.replace(regexp, new_id));
}

$(function(){
  $("#insumo_id", $(this)).tokenInput("/insumos.json", {
    propertyToSearch: "nome",
    tokenLimit: 1,
    theme: "facebook",
    searchingText: "Procurando...",
    hintText: "Digite o que deseja procurar"
  });
})

任何想法都会非常感谢。

Answer 1

它可能不起作用，因为您只调用了一次“tokenInput”（在 DOM 加载时）。您还应该在单击link_to_add_fields 链接时调用它（因此在调用add_fields 函数时）。 #insumo_id 不是一个 ID，而是一个类，这一点也很重要。它是动态的，因此应避免使用相同的 ID。这是所有这些的 JS：

function remove_fields(link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).closest(".fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).parent().after(content.replace(regexp, new_id));
  insumosTokenInput();
}

function insumosTokenInput() {
  $(".insumo_id:not(.token_input)").each(function() {
    $this = $(this);
    $this.addClass("token_input");
    $this.tokenInput("/insumos.json", {
      propertyToSearch: "nome",
      tokenLimit: 1,
      theme: "facebook",
      searchingText: "Procurando...",
      hintText: "Digite o que deseja procurar"
    });
  });
}

$(function(){
  insumosTokenInput();
});

希望对你有帮助！