I've been trying to search for an answer on here but I can't find anything that works. I have implemented a :success and :danger flash notice to my rails app. It WAS working completely fine, i.e :success was green and :danger was red, with a close button and all, BUT since adding some mailer files my :success is now showing up red??
application.html.erb excerpt:
<body>
<div class="container">
<% flash.each do |key, value| %>
<%= content_tag :div, class: "alert alert-#{key == 'notice ? 'success' : 'danger'}" do %>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<%= value %>
<% end %>
<% end %>
<%= yield %>
</div>
</body>
contact_mailer.rb
class ContactMailer < ActionMailer::Base
default to: '[email protected]'
def contact_email(name, phone, email, event_type, body)
@name = name
@phone = phone
@email = email
@event = event_type
@body = body
mail(from: email, subject: 'Contact Form Message').deliver
end
end
contacts_controller.rb
class ContactsController < ApplicationController
def new
@contact = Contact.new
end
def create
@contact = Contact.new(contact_params)
if @contact.save
name = params[:contact][:name]
phone = params[:contact][:phone]
email = params[:contact][:email]
event = params[:contact][:event_type]
body = params[:contact][:comments]
ContactMailer.contact_email(name, phone, email, event, body).deliver
flash[:success] = 'Message Sent.'
redirect_to new_contact_path
else
flash[:danger] = 'Error occurred, messgage not sent.'
redirect_to new_contact_path
end
end
end
private
def contact_params
params.require(:contact).permit(:name, :phone, :email, :event_type, :comments)
end
and, contact_email.html.erb
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>New Message from Hoot and Holla's Contact form, from <%= "#{@name}, #{@email}" %></p>
<p><%= @phone %></p>
<p><%= @event %></p>
<p><%= @body %></p>
</body>
</html>
I repeat that this was all working completely fine before the mailer stuff went in...but now i'm just baffled. Please help!
Sometimes you are going to want to use more than notice
and success
, like the Bootstrap alerts info
, danger
, and warning
.
Here is the solution I would recommend:
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %> alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<%= value %>
</div>
<% end %>
That way, when you call flash[:success] = 'foo'
, your key
would be success
, and likewise for info
, warning
, danger
, etc. This way you can utilize all of the different Bootstrap alerts.
With this method, you will have to add 2 more CSS classes, that extend the Bootstrap classes, if you want to use the syntax notice: 'hello world',
or alert: 'oops'
in your redirections, like redirect_to root_url, notice: 'welcome home'
.
If you do want to use these, then you can use Sass, like below.
.alert-alert {
@extend .alert-danger;
}
.alert-notice {
@extend .alert-warning;
}
Since my comment earlier on the mailer callback was more of a side note and unrelated to this question, I made a simple gist for ya.
In your flash loop, you are only checking flash[:notice] there. if there is flash[:notice], you applying alert-success
. unless it applying alert-danger
. So, what i change here. i am applying alert-success
for both flash[:success]
& flash[:notice]
. So,
Do in _flash.html.erb -
<%= content_tag :div, class: "alert alert-#{['success','notice'].include?(key) ? 'success' : 'danger'}" do %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With