jquery - AJAX 表单(使用 simple_form)，保留错误验证

Question

这可能是我问过的更困难的问题之一，但我已经被困了几天了，我认为最好从更有经验的 Rails 社区获得支持。

我正在开发一个大致遵循本指南的虚拟应用程序... ajax/jquery tutorial ...

在进行我自己的定制时，该指南帮助我创建了一个“品牌”(包括嵌套模型“模型”、“子模型”和“样式”)提交表单(使用 simple_form)和在同一页面上列出的品牌。这完美地工作，并且强制执行了验证(对于我的模型)。但是，当我将表单和品牌列表放在同一页面上时，我丢失了提交失败时出现的整洁的内联验证错误(见下图)。无法让内联错误发挥作用让我意识到我还有更多关于渲染的知识需要学习..这就是为什么我专注于寻找这个问题的答案

...这是列表:

下面是索引操作的 Controller :

  def index

    #This is for the product listing

    @brands = Brand.all.reverse 

    #This is for the form   

    @brand = Brand.new
    @model = Model.new
    @submodel = Submodel.new
    @style = Style.new

    respond_to do |format|
      format.html
    end
  end

上面的表单创建了在嵌套提交表单中使用的品牌、型号、子型号和样式...以下是该表单的代码:

<%= simple_form_for @brand, :html => { :class => 'form-horizontal' }, :remote => true do |m| %>

  <fieldset style = "margin-top:34px;">
    <legend></legend>
    <%= m.input :name, :label => 'Brand' %>         
    <%= m.simple_fields_for :models, @model do |p| %>    
      <%= p.input :name, :label => 'Model' %>
      <%= p.simple_fields_for :submodels, @submodel do |s| %>
        <%= s.input :name, :label => 'Submodel' %>
        <%= s.simple_fields_for :styles, @style do |ss| %>
          <%= ss.input :name, :label => 'Style' %>
        <% end %>
      <% end %>
    <% end %>

    <div class="form-actions">
      <%= m.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', brands_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>

现在，如您所见，我正在使用 :remote => true ...我希望表单创建新的“品牌”，或者让表单通过内联验证重新加载错误。目前我的创建操作如下所示:

def create
    @brand = Brand.new(params[:brand])

    respond_to do |format|
      if @brand.save
        format.html { redirect_to brands_url, notice: 'Brand was successfully created.' }
        format.json { render json: @brand, status: :created, location: @brand }
        format.js
      else
        format.html { render action: "index" }
        format.json { render json: @brand.errors, status: :unprocessable_entity }
        format.js { render 'reload' }
      end
    end
  end

出现在 if @brand.save 下的代码似乎可以工作..但是“else”下面的代码不能按我想要的方式工作。那么当@brand 不保存时会发生什么？我相信索引操作中的代码正在运行，然后 @brand.errors 被转换为 json (我认为这是为了 simple_form 验证错误)，然后 reload.js.erb 正在运行..

在尝试重新加载表单(带有验证错误)时，我放置了行 $("#entryform").load(location.href+"#entryform>*",""); 进入 reload.js.erb ...当我将无效数据放入表单时，reload.js.erb 被调用，但发生的只是表单字段重新加载为空白，而不是输入数据和内联验证错误。

我希望我在这里提供了足够的信息来获得帮助..在这个问题上真的很挣扎。谢谢!

Answer 1

我认为您可以通过将表单放入部分表单(我们将其称为 simple_form)并将此代码放入 reload.js.erb 来简化此操作:

$("#entryform").html("<%= escape_javascript(render :partial => 'simple_form') %>");

我不熟悉 jQuery 的 load 方法，但我假设它会执行第二个请求。呈现错误的关键是您在呈现表单时使用的实例变量 (@brand) 必须与您尝试在 create 中保存的变量相同，以便您可以检查其上的错误。这就是为什么当您想要渲染错误时总是使用 render 而不是 redirect_to 。如果您执行重定向，则会启动一个新请求，这意味着 @brand 被重新初始化。我假设您的 $(...).load(...) 也有同样的问题。