2

私のフォームアプリケーションでオートコンプリートポウパースにjquery Tokeninputプラグインを使用しようとしています。

問題は、私の 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"
  });
})

どんなアイデアでも非常に高く評価されます。

4

1 に答える 1

0

「tokenInput」を（DOMロードで）1回しか呼び出していないため、おそらく機能していません。link_to_add_fieldsまた、リンクがクリックされたとき (つまり、add_fields関数が呼び出されたとき)に呼び出す必要があります。#insumo_idID ではなくクラスであることも重要です。これは動的なので、同じ 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();
});

それが役立つことを願っています！

于 2012-03-29T22:01:22.683 に答える