使用 AJAX 插入部分表格

Question

我正在我的应用程序中做一个复杂而繁重的表格。因此，为了提高性能，我想用 AJAX 方法注入此表单的某些部分。但我无法成功。

为了说明，我做了这个简单的例子=

new_event（查看）：

<%= simple_form_for event, remote: true do |f| %>
    <%= f.input_field :start_at %>
    <div class="">

    </div>
    <a href="/event_add_user?form=<%=f%>" class="btn" data-method="patch" data-remote="true">
        Add user to event
    </a>
    <div class="form_area"></div>
<% end %>

event_controller（控制器）：

def add_user
    @form = params[:form]
    respond_to do |format|
       format.js {render 'add_user'}
    end
end

add_user.js.erb (js文件):

$('#event_form_area').append('<%=  j render partial: "events/user", locals: {f: @form} %>');

用户（部分）：

<%= f.input_field :user_name %>

目前，我有这个错误：

ActionView::Template::Error (undefined method `input' for "":String)

Answer 1

您正试图通过参数传递整个表单生成器 f，我认为这是不可能的。

因为 f.input_field 只是输出一些 HTML 的辅助方法，一个想法是直接将 HTML 实现到部分中。

所以，"events/user" 部分将是：

<input class="string required" id="event_user" maxlength="100" name="event[user]" type="text" value="" />

如果可行，您可以从控制器中删除 @form = params[:form]，从视图中删除 locals 散列，从 AJAX 调用中删除 ?form=<%=f%>，因为不是需要了。

input_field reference at rubydoc

您也可以使用 form_tag helpers:

<%= text_field_tag(:event,:user) %>

Answer 2

您在部分视图中将 @form 作为 f 传递。 params[:form] 很可能是一个字符串。以下是解决此问题的一些方法。

1.重新创建表单对象

由于您之前的请求中没有 f 对象，您可以重新创建它以生成 html 片段。您可以使用新的 Event 对象创建一个新的表单对象，而不是从我认为不可能的 params 中检索表单对象。我没有在 rails 中对此进行测试，但这应该可以让您了解。

def add_user
  @event = Event.new
  respond_to do |format|
    format.js {render 'add_user'}
  end
end

将@user设置为本地人

$('#event_form_area').append('<%=  j render partial: "events/user", locals: {event: @event} %>');

然后重新创建表单对象

# partial
<% form_for event do |f| %>
  <%= f.input_field :user_name %>
<% end %>

注意在第一行使用 <% 而不是 <%=。我们不希望有另一个 <form> 元素。

那么，你就完成了。此代码应生成 html 个片段

或 2。使用普通 html

在您的部分中，将您的代码重写为普通的 html 元素。例如

<input class="form-control" type="text" name="event[user_name]" id="event_user_name">

使用 AJAX 插入部分表格

Using AJAX to insert a partial form

ruby-on-rails

ajax

simple-form