通过 ajax 调用呈现 rails fields_for

Question

我有一个 AJAX 电话：

$('#enrollment_members').change(function(){
var memberNumber = $(this);
$.ajax({type: 'GET',
      url: $(this).href,
      type: "get",
      data: { members: memberNumber.val() },
      error: function(){ alert("There was a problem, please try again.") }
      });
return false;

console.log(data);
});

通过它我将 params[:members] 发送到一个新方法中。

我想做这样的事情：

def new
  @enrollment = Enrollment.new
  params[:members] ? params[:members].to_i.times { @enrollment.atendees.build } : @enrollment.atendees.build

  respond_to do |format|
    format.js
  end
end

我需要这个值才能知道要建造多少 fields_for。

但是这是在新操作中，在 members 输入字段中输入值后如何更新新视图的内容？

从那个三元组开始，@enrollment.atendees 包含 4 个对象。

我的 new.js.erb :

$("#contact-wrap").html("<%= j render(:partial => 'enrollments/form') %>");

xhr 响应包含 4 个 fields_for 表单。

Answer 1

对象 #enrollment_members 是您要传递给控制器的输入值吗？

如果是这样，试试这个：

$('#enrollment_members').change(function(){
  var memberNumber = $(this);
  $.ajax({type: 'GET',
    url: $(this).href,
    type: "get",
    data: { members: memberNumber.serialize() }, //CHANGE
    error: function(){ 
      alert("There was a problem, please try again.") 
    }
});
return false;

Answer 2

嗯，你真的确定你需要为此定制解决方案吗？ fields_for 中动态 adding/removing children 的行为已经被 nested_form (no longer maintained) or cocoon（更有前途）

等几个 gems 解决了

我建议实际重用他们的库，即使您需要按照自己的方式进行调整。因为做一个 AJAX 请求是完全没有意义的。你的 AJAX 是一个 GET 请求，它总是做同样的事情，除非你有一个自定义的 atendees.build ，它会为连续的调用做奇怪的事情（比如在某处增加一个全局计数器）。

我上面提到的那些 gems 实际上会将 HTML 字段保存在 "template" 中生成（存储在本地 HTML 或 JS 中），并在需要时调用此模板添加新字段。

Answer 3

我通过修改 ajax 调用使其工作：

$('#enrollment_members').change(function(){
var memberNumber = $(this);
$.ajax({type: 'GET',
      url: $(this).href,
      type: "get",
      dataType : "html",
      data: { members: memberNumber.val() },
        success: function( data ) {
          var result = $('<div />').append(data).find('#contact-wrap').html();
          $('#contact-wrap').html(result);
          $('#atendees-wrap').show();
        },
        error: function( xhr, status ) {
          alert( "Sorry, there was a problem!" );
        }
      });
return false;

});

通过 ajax 调用呈现 rails fields_for

Render rails fields_for through ajax call

javascript

ajax

ruby-on-rails

simple-form

ruby-on-rails-4