jquery.Tokeninput with dynamic nested forms in rails 3.0.9

im trying to use the jquery Tokeninput plugin for autocomplete pouporse in my form application.

the thing is, in my java script the context ID is dinamically generate, so i dont know how to specify it to work, and even if i use the paremeter :id in the view field it is not identifyed.

I tryed to use this with a single not dynamic field and worked just fine. The problem is with the edit view. When i come to edit, every field shows all results for that item.

So if i have 3 field, the 3 display all the 3 itens.

my views involved are

/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| %>
    开发者_JS百科            <%= 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>

The jQuery file is:

/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"
  });
})

Any ideas would be very apreciataded.

It probably isn't working because you're only calling 'tokenInput' once (on DOM-load). You should also call it when the link_to_add_fields link is clicked (so when the add_fields function is called). It's also important that #insumo_id isn't an ID, but a class. It's dynamic, so the same ID's should be avoided. Here's the JS for all of this:

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

I hope it helps!