使用 AJAX 插入部分表单答案

【问题标题】：Using AJAX to insert a partial form使用 AJAX 插入部分表单
【发布时间】：2018-10-23 10:37:21
【问题描述】：

我在我的应用程序中做一个复杂而繁重的表单。所以为了提高性能，我想用 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（未定义方法 `input' 用于 "":String）

【问题讨论】：

href="/event_add_user?form=<%= event%>" 你能通过以下更改来测试它吗？=？

标签： ruby-on-rails ajax simple-form

【解决方案1】：

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

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

因此，“事件/用户”部分将是：

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

【讨论】：

Thnaks @Getu，这正是我正在寻找的。继续好！！

【解决方案2】：

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

1.重新创建表单对象

由于您之前的请求中没有 f 对象，您可以重新创建它以生成 html sn-p。您可以使用新的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 sn-ps

或 2。使用纯 html

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

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

【讨论】：