2

ActiveModel の有効性をチェックする単純なコントローラーがあります。モデルが有効な場合、:success フラッシュ メッセージが表示されます。そうでない場合は、エラー フラッシュ メッセージが表示されます。成功のフラッシュ メッセージが正しく表示されます (緑色のフォントと背景)。エラー メッセージが正しく表示されません (赤い背景にフォントが赤くありません)。同じことが :notice フラグにも当てはまることに気付きました。:error フラグを :warning に変更すると、正しく表示されます (黄色の背景に黄色のフォント)。ある種の奇妙な css の問題だと思いますが、デバッグする方法がわかりません。助言がありますか？

コントローラーのコードは次のとおりです。

class SmsController < ApplicationController
  def send_text_message
    phone = PhoneNumber.new(pnumber: params[:phone]) 
    puts 'phone = ' + phone.pnumber
    if phone.valid?
      # code that sends a sms message..
      flash[:success] = "Message has been sent!"
      redirect_to :back
    else
      flash[:error] = "This is not a valid mobile number" #phone.errors.full_messages.join(". ")
      redirect_to :back
    end
  end
end

application.html.erb は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Appointment Save: ">
<title>Appointment Mate</title>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
 <!-- Fixed navbar -->
 <%= render 'layouts/header' %>
 <div class="container">
 <% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
 <% end %>
 <%= yield %>
 </div>
 <%= render 'layouts/footer' %>
 <!-- Bootstrap core JavaScript ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!--%= javascript_include_tag "bootstrap.min" %-->
 <!--script src="assets/bootstrap.min.js"></script-->
</body>
</html>

ビューは次のとおりです。

<div class="col-sm-offset-4 col-sm-4">
<br></br>
<br></br>
<br></br>
<%= bootstrap_form_tag url: '/sms/send' do |f| %>
  <%= f.telephone_field :phone, label: "Enter a valid UK mobile phone number"%>
  <%= f.submit "Send a reminder", class: "btn-custom-lighten btn-lg" %>
<% end %>
</div>

:success フラッシュのスクリーンショットは次のとおりです。

ここに画像の説明を入力

:error フラッシュのスクリーンショットを次に示します。

ここに画像の説明を入力

ご覧のとおり、エラー フラッシュはプレーン フォントで背景なしで表示されます。コントローラーのフラグが :warning に変更されると、フォントと背景が正しく設定されます。したがって、正しく表示されないのは :error フラッシュと :notice フラグだけです。それについて何をすべきか？

4

2 に答える 2

3

TL;DR ユース ケースでは、flash[:error] ではなく、flash[:danger] を使用する必要があります。

あなたのコードから、Bootstrap を使用していることがわかります。

<div class="col-sm-offset-4 col-sm-4">

ブートストラップでは、スタイル付きのフラッシュ クラスが次のように表示されます。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

次に、上記のapplication.html.erbコードには次のものがあります。

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
 <% end %>

上記のコードは、フラッシュの message_type がブートストラップ アラート クラスと一致する限り、アラートのブートストラップのクラス命名に一致する div を作成することがわかります。flash[:success], flash[:info], flash[:warning], or flash[:danger]

別の方法として、application.html.erb のコードを変更することもできます<% flash.each %>が、それはかなり面倒です。

于 2016-05-26T19:09:35.283 に答える