在rails 3.0.9中使用动态嵌套表单的jquery.Tokeninput

时间:2011-08-25 13:08:51

标签: jquery ruby-on-rails-3 jquery-tokeninput

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

问题是,在我的java脚本中,上下文ID是dinamically生成的,所以我不知道如何指定它工作,即使我在视图字段中使用paremeter: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"
  });
})

任何想法都会非常夸张。

1 个答案:

答案 0 :(得分:0)

它可能不起作用,因为你只调用'tokenInput'一次(在DOM-load上)。您还应该在单击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();
});

我希望它有所帮助!