Как сохранить модальный режим открытым в рельсах, если возникла ошибка проверки - PullRequest
Новая
       5

Как сохранить модальный режим открытым в рельсах, если возникла ошибка проверки

0 голосов
/ 07 октября 2019

Я немного озадачен тем, как я могу сделать рендеринг модала начальной загрузки (формы), если он вызывает ошибку проверки формы?

Цель

В настоящее время я пытаюсь создать новый магазин через модал.

Проблемы

  • Я столкнулся с проблемой, из-за которой мой модал, содержащий форму, не появляется, когда я нажимаю кнопку. ~ Достигнут файл new.js.erb, так как я могу отобразить флэш-сообщение (вместо формы). ~

  • Мой тег подсвечиваетсяв моем браузере, когда я нажимаю кнопку, и 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 %>

просмотров / магазинов / 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>

1 Ответ

1 голос
/ 07 октября 2019

Когда ваша форма отображается на странице 'index', требуется, чтобы переменная @store была назначена в действии 'index' контроллера. 

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. Вместо этого, чтобы избежать ошибок, вам не нужно отображать форму на странице «index» (когда отображается страница «index»), как вы делали это раньше.

Добавьте пустую divна странице индекса, где ваша форма будет отображаться с помощью сценария «new.js.erb». 

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

Сценарий «new.js.erb» должен работать в обоих случаях:

  1. Отображение новой формы (действие 'new')
  2. Повторное отображение формы, когда она недействительна (действие 'create').

views / stores /new.js.erb 

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

Возможно, вам потребуется не только визуализировать модал, но и открыть его. 

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