Jquery Tokeninput и динамические вложенные формы - PullRequest
Новая
       23

Jquery Tokeninput и динамические вложенные формы

4 голосов
/ 17 августа 2011

Я использую настройку железной дороги RB - # 197, часть вложенной модели, часть 2 , чтобы динамически добавлять поля в форму, но у меня возникают проблемы с получением полей Tokeninput для работы.

Форма: 

<%= 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>

Jquery Tokeninput функции внутримоего application.js: 

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

При попытке data-pre с TokenInput: 

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

1 Ответ

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

Вы можете использовать jQuery insertBefore вместо до , так как это вернет вставленный элемент. Это поможет вам вызвать какое-то событие. У вас может быть прослушиватель этого события, в котором вы можете ввести свой токен-код. Вы должны также использовать класс вместо идентификатора, так как многие элементы могут иметь один и тот же класс, но никакие два элемента не должны иметь одинаковый идентификатор. 

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

Это просто идея, код не проверен.

...