使用JQuery的多个嵌套字段

Question

我试图通过使用ajax请求来动态添加嵌套字段以获取视图并将其传递给表单。从ajax请求添加新字段有效。但它不会拯救..我知道为什么，但我不知道解决方案。

问题

所以，每次我点击添加新字段按钮。 它不仅会添加新的输入字段，还会包含在新的用户表单标记中。我必须删除表单标记，但保留输入选择，以便能够将动态添加的嵌套字段保存到数据库。我想知道解决这个问题的方法是什么。

/用户/ AJAX /新时区

这是在向URL调用ajax GET请求时返回的字段

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="JvePGr1rdBZlHEF76I8saAzQzy3nV9K8b6Xt6QpppNA="></div> <!-- I don't want this form tag -->
      <select class="form-control" id="user_timezones_attributes_1416459521_region" name="user[timezones_attributes][1416459521][region]">
      <!-- OPTION VALUES -->
      <span class="input-group-addon beautify" data-toggle="nestedfield">
        <input name="user[timezones_attributes][1416459521][_destroy]" type="hidden" value="0"><input id="user_timezones_attributes_1416459521__destroy" name="user[timezones_attributes][1416459521][_destroy]" type="checkbox" value="1"><i class="glyphicon glyphicon-remove"></i>
      </span>
</form> <!-- I don't want this form tag -->

CODE

的routes.rb

get 'users/ajax/new-timezone' => 'users#new_field_timezone'

users_controller.rb

# Create a new timezone field
def new_field_timezone
 @user = User.new
 @user.timezones.new
 render "new_timezone", layout: false
end

_form.html.erb

<%= form_for @user, html: { role: "form" } do |f| %>
      <%= f.text_field(:name, class:"form-control", autofocus: true, placeholder: "Full Name") %>
      <%= render partial: "timezones_fields", locals: { f: f, child_index: Time.now.to_i } %>

      <%= f.submit 'Create account', class: "btn btn-sm btn-primary" %>
<% end %>

_timezone_fields.html.erb

<%= f.fields_for :timezones, child_index: child_index do |tf| %>
    <%= tf.collection_select(:region, ActiveSupport::TimeZone.all, :name, :to_s, {:include_blank => 'Please select a timezone'}, {class: "form-control"}) %>
    <span class="input-group-addon beautify" data-toggle="nestedfield">
      <%= tf.check_box :_destroy %><i class="glyphicon glyphicon-remove"></i>
    </span>
  </div>
<% end %>

new_timezone.html.erb

<%= form_for @user do |f| %>
      <%= render partial: "timezones_fields", locals: {f: f, child_index: Time.now.to_i} %>
<% end %>

dynamic_fields.js

$.ajax({
    url: "/users/ajax/new-timezone",
  })
  .success(function(data) {
    btn.button('reset');
    $(data)
      .hide()
      .insertBefore($('button[data-toggle="nestedfield"]'))
      .fadeIn(250);
  })
  .error(function(data) {
    console.log("There was an error inserting: " + data);
  });

Answer 1

我已经通过使用Ryan Bate添加嵌套字段的方法解决了这个问题。

dynamic_fields.js

function add_field(button, association, content) {

  // Each time a new field is created the id will be unique 

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

  // Use regular expression to find the string in the
  // id and name to be replaced example by default its
  // id="user_associations_attributes_new_association_region"
  // name="user[associations_attributes][new_association][region]"

  var regexp = new RegExp("new_" + association, "g");

  $(button).button('loading');
  setTimeout(function () {
        $(button).button('reset')
    }, 3000);

  $(content.replace(regexp, new_id))
        .hide()
        .insertBefore($(button))
        .fadeIn(250);

  $(button).button('reset');
}

application_helper.erb

module ApplicationHelper
  def button_to_add_field(f, association)  
    new_object = f.object.send(association).klass.new 
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|  
      render(association.to_s.singularize + "_field", :f => builder)  
    end 

    # Assign fields and association name to onclick
    # html attribute as a parameter to a javascript function
    button = "<button type='button' class='btn btn-primary' onclick='add_field(this, \"#{association}\", \"#{escape_javascript(fields)}\")' formnovalidate data-loading-text='Loading...'><span class='glyphicon glyphicon-plus'></span></button>"

    # Return a button that can be rendered
    button.html_safe
  end  
end

_form.html.erb

<%= form_for @user, html: { role: "form" } do |f| %>

  <!-- User form field -->
  <h3>User Form</h3>
  <%= f.text_field(:name, class:"form-control", autofocus: true, placeholder: "Full Name") %>

  <!-- Display existing nested field or new field eg: 1.times {@user.timezones.build} -->
  <h3>Nested Form</h3>
  <%= f.fields_for :association do |af| %>
    <%= af.collection_select(:something, Options.all, :name, :value, prompt: true) %>
  <% end %>

  <!-- Our helper to add more field -->
  <%= button_to_add_field f, :associations %>

<% end %>

_association_field.html.erb

这将是助手用于动态添加字段的内容 不需要 field_for 或 form_for 方法，因为它只是一个从 f 变量的视图> button_to_add_field 帮助

<%= f.collection_select(:association_field, SomeOptions.all, :name, :value, prompt: true) %>