如果引发验证错误，如何在 Rails 中保持模式打开答案

【问题标题】：How to keep a modal open in rails if validation error is raised如果引发验证错误，如何在 Rails 中保持模式打开
【发布时间】：2019-10-07 13:36:30
【问题描述】：

如果引导模式（表单）引发表单验证错误，我对如何重新渲染它感到有些困惑？

目标

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

问题

我遇到了一个问题，即当我单击按钮时，我的包含表单的模式没有显示出来。 ~ 到达了 new.js.erb 文件，因为我可以渲染一个 flash 消息（而不是一个表单）。~
当我单击按钮并呈现 new.js.erb 和表单部分时，我的标签在浏览器中亮起。因此，我还附加了我的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 %>

views/stores/new.js.erb

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

视图/商店/_form

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

【问题讨论】：

标签： javascript jquery ruby-on-rails bootstrap-modal

【解决方案1】：

当您的表单在“索引”页面上呈现时，它需要在控制器的“索引”操作中分配@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 变量987654327@ 行动。相反，为了避免错误，您不必像以前那样在 'index' 页面上呈现表单（当呈现 'index' 页面时）。

在您的表单将由“new.js.erb”脚本呈现的索引页面上添加一个空的div。

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

'new.js.erb' 脚本应该适用于这两种情况：

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

views/stores/new.js.erb

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

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

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

【讨论】：

感谢您的帮助。索引操作是def index @user = current_user @stores = current_user.stores end
那又怎样？你在那里添加了@store 吗？
更正它并在索引操作中添加了@store。 @store 现在确实可以在表单中使用，只剩下重新渲染模态问题要解决..
你有'new.js.erb'文件吗？