jquery.Tokeninput с динамическими вложенными формами в рельсах 3.0.9 - PullRequest
Новая
       14

jquery.Tokeninput с динамическими вложенными формами в рельсах 3.0.9

2 голосов
/ 25 августа 2011

Я пытаюсь использовать плагин jquery Tokeninput для автозаполнения pouporse в моем приложении формы.

Дело в том, что в моем java-скрипте идентификатор контекста генерируется динамически, поэтому я не знаю, как указать его для работы, и даже если я использую paremeter: id в поле просмотра, он не идентифицируется.

Я пытался использовать это с одним не динамическим полем и работал просто отлично. Проблема в редактировании. Когда я прихожу к редактированию, каждое поле показывает все результаты для этого элемента.

Так что, если у меня есть 3 поля, 3 отображают все 3 итена.

мои взгляды

/ вид / привилегия / 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 %>

/ вид / привилегия / _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>

/ вид / привилегия / _insumos_comp_rel_fields.html / эрб 

<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 голосов
/ 30 марта 2012

Возможно, это не работает, потому что вы вызываете tokenInput только один раз (при загрузке DOM).Вы также должны вызывать его при нажатии на ссылку link_to_add_fields (например, когда вызывается функция add_fields).Также важно, что #insumo_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();
});

Надеюсь, это поможет!

...