Flash 消息仅显示一次 (Rails 6)

Question

我试图在创建评论时在我的 ajax 渲染中显示一条闪现消息。这工作得很好，但在我重新加载页面并使我的 AJAX call/render 后只能工作一次。如果我尝试在不重新加载页面的情况下提交另一条评论，它将不会显示 #flash_notice。有没有办法来解决这个问题？ Demo.

控制器

      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;

Answer 1

当您提交表单时，您应该将 $('#flash-message').html("<%= j render 'shared/flash' %>").delay(4000).fadeOut(4000); 设置为 flash-message 块内的块。而且你还应该使用 replaceWith 函数。此函数将更新 flash-message 块内的块。你需要这个原因 fadeOut 你使用 set display: none 永久地块，这就是为什么看不到任何错误消息。我附上了您网站的屏幕截图。

消息在 container 块内，但 flash-message 块有 display: none。这就是为什么你看不到它）

Flash 消息仅显示一次 (Rails 6)

Flash message is displayed only once (Rails 6)

ajax

ruby-on-rails

flash-message