javascript - 如果出现验证错误，如何保持模式在rails中打开

我对如何重新引发引导程序模态（表单）感到困惑，如果它引发了表单的验证错误？

目标

我目前正在尝试通过模式创建新商店。

问题

我遇到一个问题，当我单击按钮时，包含表单的模态无法显示。〜已到达new.js.erb文件，因为我能够呈现即显消息（而不是表单）。
当我单击按钮并显示new.js.erb和表单partial时，我的标签在浏览器中变亮。因此，我还附加了views / layouts / application.html.erb文件和控制台日志以及呈现的文件。

按下新按钮时呈现的文件的控制台日志：

Rendering stores/new.js.erb
  Rendered stores/_age_table_fields.html.erb (5.8ms)
  Rendered stores/_age_table_fields.html.erb (6.0ms)
  Rendered stores/_form.html.erb (32.0ms)
  Rendered stores/new.js.erb (34.8ms)
Completed 200 OK in 58ms (Views: 47.2ms | ActiveRecord: 0.8ms)

码

views / stores / index.html.erb

<%= render "partials/show_panel_stores_overview"%>

views / partials / show_panel_stores_overview.html.erb

<%= link_to 'New store', new_store_path, remote: true %>

视图/商店/new.js.erb

var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('body').append(wrapper);

查看/商店/表单

<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>

商店控制器

def new
    @store = current_user.store.build
    @store.age_tables.build
    respond_to do |format|
      format.html { redirect_to root_url, alert: 'Page not accessible' }
      format.js
    end
    authorize @store

  end

  def create
    @store = current_user.stores.create(store_params)
    authorize @store
    if @store.save
      redirect_to stores_path
    else
      render 'new'
    end
  end

views / layouts.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TODO</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <%= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
  </head>
  <body>
    <%= yield %>
    <%= render 'shared/flashes' %>

    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>

  </body>
</html>

最佳答案

在“索引”页面上呈现表单时，要求在控制器的“索引”操作中分配@store变量。

class StoresController < ApplicationController
  def index
    @store = current_user.stores.build
    # ...
  end
end

为了使您能够重新呈现模式，表单在提交时应发送一个Ajax请求。为此使用remote: true

<%= simple_form_for (@store, remote: true) do |f|%>

更新

现在，您已经显示具有new.js.erb文件，并且表单是通过单独的“ / new”请求呈现的，我们可以看到您实际上不需要在@store操作中分配index变量。相反，为了避免错误，您不必像以前一样在“索引”页面上（呈现“索引”页面时）呈现表单。

在索引页面上添加一个空的div，在该页面上将通过'new.js.erb'脚本呈现表单。

<div id="new-store-form"></div>

在两种情况下，“ new.js.erb”脚本均应适用：

渲染新表格（“新”操作）
无效时重新呈现表单（“创建”操作）。

视图/商店/new.js.erb

$("#new-store-form").html("<%= j(render 'form') %>");

您可能不仅需要渲染模式，还需要打开它。

  $("#modal_id").modal('show');