Jquery Tokeninput & 动态嵌套表单

Posted 2023-05-09

【中文标题】Jquery Tokeninput & 动态嵌套表单

【英文标题】：Jquery Tokeninput & Dynamic Nested Forms

【发布时间】：2011-10-29 01:34:09

【问题描述】：

我正在使用R.B. railcast - #197 Nested Model Form Part 2 的设置向表单动态添加字段，但我无法让Tokeninput fields 工作。

表格：

<%= form_for(current_user, :url => user_products_path) do |f| %>
  <%= f.error_messages %>
    <%= f.fields_for :user_products do |builder| %>
        <%= render "user_product_fields", :f => builder %>
    <% end %>
    <%= link_to_add_fields "Add a UserProduct", f, :user_products %>
    <%= f.submit "Create" %>
<% end %>

这是我的 user_product_fields 部分，令牌 text_fields 是我遇到的问题：

<div class="fields">
        <%= f.label :product_token, "Product" %>
        <%= f.text_field :product_token, :id => 'product_token' %>
        <%= f.label :address_token, "Address" %>
        <%= f.text_field :address_token, :id => 'address_token' %>
        <%= f.label :price %>
        <%= f.text_field :price %>
        <%= link_to_remove_fields "remove", f %>
</div>

我的 application.js 中的 Jquery Tokeninput 函数：

$(function() 
  $("#product_token").tokenInput("/products.json", 
    prePopulate: $("#product_token").data("pre"),
    tokenLimit: 1
  );
);

$(function() 
  $("#address_token").tokenInput("/business_addresses.json", 
    prePopulate: $("#address_token").data("pre"),
    tokenLimit: 1
  );
);

嵌套形式在函数中的作用是这样的：

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


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

这里的这一行：

var new_id = new Date().getTime();

使 tokeninput 字段动态化，这是我从 html 中提取的，注意字段中不断变化的长数字。这是因为上面的一行。

<label for="user_user_products_attributes_1313593151076_product_token">Product</label>
<label for="user_user_products_attributes_1313593146876_product_token">Product</label>
<label for="user_user_products_attributes_1313593146180_product_token">Product</label>

当字段不断变化时，如何让我的令牌字段工作？

谢谢。

---

编辑：新的工作代码。

 function add_fields(link, association, content) 
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")
    $(content.replace(regexp, new_id)).insertBefore($(link).parent()).trigger("nestedForm:added");


$('div.fields').live("nestedForm:added", function() 
  $("#product_token", $(this)).tokenInput("/products.json", 
    prePopulate: $("#product_token", $(this)).data("pre"),
    tokenLimit: 1
  );
);

---

当尝试使用 TokenInput data-pre 时：

def new
  @user_product = current_user.user_products.build

  # This line below is for TokenInput to work, This allowed me to use @products.map on the form.
  @products = []
end

def edit
  @user_product = UserProduct.find(params[:id])

  # This line below had to find the Product associated with the UserProduct
  @products = [@user_product.product]
end

【问题讨论】：

解决方案中的第一行将被替换为add_fields 函数。要使类选择器起作用，您需要更改 user_product_fields 部分以分配类而不是 id。您还需要像我在答案中所做的那样确定$(".product_token").data("pre") 的范围。

谢谢，你成功了！

您是如何设法在嵌套输入中使用 data-pre 的？

@negarnil 用于编辑/更新模型时对吗？

是的，当我去编辑时，使用 tokeninput 的嵌套属性是空的。在 railscast ryan 使用“data-pre”=> @book.authors.map(&:attributes).to_json。我不知道如何获取嵌套对象。

【参考方案1】：

您可以使用 jQuery 的 insertBefore 而不是 before，因为这将返回插入的元素。它将帮助您触发一些事件。您可以在此事件上设置一个侦听器，您可以在其中设置令牌输入代码。您还应该使用 class 而不是 id，因为许多元素可以具有相同的 class，但没有两个元素应该具有相同的 id。

$(content.replace(regexp, new_id)).insertBefore($(link).parent()).trigger("nestedForm:added");

$('div.fields').live("nestedForm:added", function() 
  $(".product_token", $(this)).tokenInput("/products.json", 
    prePopulate: $(".product_token", $(this)).data("pre"),
    tokenLimit: 1
  );
);

这只是一个想法，代码未经测试。

【讨论】：

比你输入的还要多，你知道如何让 Tokeninput 类选择器工作吗？当我将以下内容用于 TokenInput 时，它不起作用。

您能用您当前的更改更新问题吗？我不明白什么不起作用。

@rubish,wrbg - 我可以请你访问***.com/questions/9141176/…吗？只是希望您在有关令牌输入的问题中做出贡献。我不知道这样的请求在 SOF 中是否可以接受