Rails/Bootstrap - 闪光通知：成功现在是红色而不是绿色？

Question

我一直试图在这里寻找答案，但找不到任何有效的答案。我已经在我的 rails 应用程序中实现了 :success 和 :danger flash 通知。它工作得很好，即 :success 是绿色的， :danger 是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的 :success 现在显示为红色？

application.html.erb 摘录：

<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">&times;</span></button>
        <%= value %>
      <% end %>
    <% end %>

    <%= yield %>
  </div>

</body>

contact_mailer.rb

class ContactMailer < ActionMailer::Base
  default to: 'justindavidson23@gmail.com'

  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

并且，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>

我再说一遍，在邮件程序进入之前这一切都工作得很好......但现在我只是感到困惑。请帮忙！

Answer 1

在您的 flash 循环中，您只检查那里的 flash[:notice]。如果有 flash[:notice]，你申请 alert-success。除非它应用 alert-danger。所以，我在这里改变了什么。我正在为 flash[:success] 和 flash[:notice] 申请 alert-success。所以，在 _flash.html.erb -

中执行

  <%= content_tag :div, class: "alert alert-#{['success','notice'].include?(key) ? 'success' : 'danger'}" do %>

Answer 2

在应用程序布局中尝试此代码...

<div id="wrapper">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<% flash.each do |name, msg| %>
 <%= content_tag(:div, msg, :id=>"#{name}", :class `enter code here`=>"alert alert-  info") %>
<%end%>
</div>
</div>
</div>
</div>

<script type="text/javascript">
window.setTimeout(function() 
{
$("#notice").fadeTo(500, 0).slideUp(500, function()
{
$(this).remove();
});
}, 5000);
</script>
<%= yield%>

Answer 3

哦，非常感谢@AmitSuroliya！！这非常有效！我正在尝试找出代码中实际发生的事情...我认为您无法简短解释为什么这行得通吗？？...如果不是，还是谢谢你！非常感谢:)

贾斯汀

PS 对于遇到同样问题并阅读此内容的人....该解决方案是将其复制并粘贴到我的 application.html.erb 文件中并替换我的 content_tag 行。 ..不创建一个名为 _flash.html.erb 的部分 ..以防万一有人在那里感到困惑 :)

Answer 4

有时您想要使用的不仅仅是 notice 和 success，例如 Bootstrap alerts、info、danger 和 [=16] =].

这是我推荐的解决方案：

<% 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">&times;</span></button>
    <%= value %>
   </div>
<% end %>

这样，当您调用 flash[:success] = 'foo' 时，您的 key 将是 success，对于 info、warning、[=15= 也是如此], 等。这样你就可以利用所有不同的 Bootstrap alerts.

使用此方法，您必须再添加 2 个 CSS 类，以扩展 Bootstrap 类、if 你想在重定向中使用 notice: 'hello world', 或 alert: 'oops' 语法，例如 redirect_to root_url, notice: 'welcome home'.

如果你确实想使用这些，那么你可以使用 Sass，如下所示。

.alert-alert {
  @extend .alert-danger;
}

.alert-notice {
  @extend .alert-warning;
}

由于我之前对邮件回调的评论更多的是旁注，与这个问题无关，所以我为你做了一个 simple gist。

Rails/Bootstrap - 闪光通知：成功现在是红色而不是绿色？

Rails/Bootstrap - Flash notice :success is now red and not green?

ruby

flash

ruby-on-rails

ruby-on-rails-3

twitter-bootstrap