1

Im trying to display a flash message in my ajax rendering when a review is created. This works perfectly but to work only once after I reload the page and make my AJAX call/render. If i try to submit another review without reloading the page it won't display the #flash_notice. Is there a way to fix this? Demo.

controller

      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);

view

<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;
Alex
  • 39
  • 1
  • 6
  • After rendering the flash message it will be removed from the flash. Since the action is not redirecting the user or rendering a new template the flash will stay empty. Check this [article](https://www.rubyguides.com/2019/11/rails-flash-messages/#:~:text=What%20are%20flash%20messages%3F,Password%20changed%20correctly%E2%80%9D%20(confirmation)) for more information and examples about flash. – Hackman Dec 09 '20 at 15:34

1 Answers1

0

When u submit the form u should set $('#flash-message').html("<%= j render 'shared/flash' %>").delay(4000).fadeOut(4000); to the block which is inside flash-message block. And also u should use replaceWith function. This function will update block which is within flash-message block. U need this cause fadeOut that u use set display: none permanently to the block and that's why don't see any error message. I attached screenshot from your site.

The message is inside container block but flash-message block has display: none. That's why u can't see it)

enter image description here

CR7
  • 1,056
  • 1
  • 8
  • 18