Флэш-сообщение отображается только один раз (Rails 6)

#ruby-on-rails #ajax #flash-message

#ruby-on-rails #аякс #flash-сообщение

Вопрос:

Я пытаюсь отобразить флэш-сообщение в моем рендеринге ajax при создании обзора. Это работает отлично, но работает только один раз после перезагрузки страницы и выполнения вызова / рендеринга AJAX. Если я попытаюсь отправить еще один отзыв без перезагрузки страницы, на нем не будет отображаться #flash_notice. Есть ли способ это исправить? ДЕМОНСТРАЦИЯ.

контроллер

       def create
        @contact = Contact.new(contact_params)
        if verify_recaptcha
          respond_to do |format|
            if @contact.save
              FormMailer.with(form: @contact).new_form_email.deliver_later
              format.js   { flash.now[:success] = 'Thank you for your message.' }
            else
              format.js { flash.now[:error] = see_errors(@contact) }
            end
          end
        end
      end
    
      def see_errors(x)
        if x.errors.any?
          view_context.pluralize(x.errors.count, 'error').to_s  
            ' prohibited this call from being send: '  
            x.errors.full_messages.map { |i| %('#{i}') }.join(',')
        end
      end
      
  private

  def contact_params
    params.require(:contact).permit(:name, :email, :subject, :message)
  end

create.js.erb

 // Test for ajax success
console.log("This is the create.js.erb file");
// Render flash message
$('#template').html("<%= j render 'template' %>");
$("#new_contact")[0].reset();
$('#flash-message').html("<%= j render 'shared/flash' %>").delay(4000).fadeOut(4000);

Вид

 <div id="flash-message">
    <%= render 'shared/flash' %>
</div>

_flash.html.erb

 <div class="container">
  <% flash.each do |type, msg| %>
    <div class="alert <%= bootstrap_class_for_flash(type) %> alert-dismissable fade show">
      <%= msg %>
    </div>
  <% end %> 
</div>

application_helper.rb

 module ApplicationHelper
  def bootstrap_class_for_flash(flash_type)
    case flash_type
    when 'success'
      'alert-success'
    when 'error'
      'alert-danger'
    when 'warning'
      'alert-warning'
    when 'notice'
      'alert-info'
    else
      flash_type.to_s
    end
  end
end

package.json

 {
  "name": "blog",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

application.js

 require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap");

var jQuery = require("jquery");
// import jQuery from "jquery";
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

1. После рендеринга флэш-сообщения оно будет удалено из флэш-памяти. Поскольку действие не перенаправляет пользователя или не создает новый шаблон, флэш-память останется пустой. Ознакомьтесь с этой статьей для получения дополнительной информации и примеров о flash.

Ответ №1:

Когда вы отправляете форму, вы должны установить $('#flash-message').html("<%= j render 'shared/flash' %>").delay(4000).fadeOut(4000); значение для блока, который находится внутри flash-message блока. А также вы должны использовать replaceWith функцию. Эта функция обновит блок, который находится внутри flash-message блока. Вам нужна эта причина fadeOut , по которой вы display: none постоянно используете set для блока, и именно поэтому не видите никакого сообщения об ошибке. Я приложил скриншот с вашего сайта.

Сообщение находится внутри container блока, но flash-message блок имеет display: none . Вот почему ты этого не видишь)