Question

我正在尝试使用SnackbarJS将所有Flash消息转换为小吃条消息。我的即时消息已成功转换为小吃栏消息，但它们显示了两次。这是一个全球性问题，通过我的应用程序对所有Flash消息都会发生。

可以在此处找到将Flash消息转换为快餐栏消息的文档：在此处可以找到有关如何执行此操作的文档：chttps：//github.com/elfassy/snackbarjs-rails

例如，每次用户输入密码失败，小吃栏消息“无效的用户名或密码”都会显示两次。

我非常确定该问题与application.js文件有关，并且可以通过.preventDefault()进行修复，但是我不确定如何实施此修复程序。

宝石文件

gem 'snackbarjs-rails'

application.js

//= require snackbar

$.each( flashMessages, function(key, value){
  $.snackbar({content: value, style: key, timeout: 10000});
});

sessions_controller.rb（包含Flash消息）

def create
    user = User.authenticate(params[:username].downcase, params[:password])

    if user && user.emailVerified && user.is_active
      sign_in user
      if is_owner?
        redirect_back_or_default(home_dashboard_url)
      else
        redirect_to account_path, :notice => 'Logged in!'
      end
    else
      if user && !user.emailVerified
        flash.now.alert = '<span class="message">Please verify your email. 
        Click <a href="javascript:void(0)" class="resend-email" data- 
        username="' +params[:username].downcase+ '">here</a> to resend 
        it</span>'
      else
        if user && !user.is_active
          flash.now.alert = 'Your account has been deactivated by the business 
          owner'
        else
          flash.now.alert = 'Invalid username or password'
        end
      end
      render "new"
    end
  end

布局文件： application.html.erb

  <%= render :layout => "layouts/base" do %>
    <%= render "layouts/flashes" %>
    <%= yield %>
  <% end %>

_external_js_libs.html.erb

<% @js_libs = yield :js_libs %>

<% content_for :external_js_libs do %>
  <%= javascript_include_tag "vendor/modernizr/modernizr.2.8.3.min" %>
<% end %>

<% if @js_libs.include? 'gmaps' %>
  <% content_for :javascript do %>
    <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyB-cfYp0VsRHQZCPk6Q6RCAkiqTI22ICqY&libraries=places" %>
    <%= javascript_include_tag "vendor/gmaps/gmaps" %>
  <% end %>
<% end %>

<% if @js_libs.include? 'flot' %>
  <% content_for :javascript do %>
    <%= javascript_include_tag "vendor/flot/flot-chart" %>
    <%= javascript_include_tag "vendor/flot/flot-chart-resize" %>
    <%= javascript_include_tag "vendor/flot/flot-chart-time" %>
    <%= javascript_include_tag "vendor/flot/flot-chart-stack" %>
  <% end %>
<% end %>

<% if @js_libs.include? 'chartjs' %>
  <% content_for :javascript do %>
    <%= javascript_include_tag "vendor/chartjs/Chart.bundle.min" %>
    <%= javascript_include_tag "vendor/chartjs/Chart.min" %>
  <% end %>
<% end %>


<%= javascript_tag do %>
  window.flashMessages = $.parseJSON('<%=j flash.to_hash.to_json.html_safe %>');
<% end %>

_base.html

<!DOCTYPE html>
<%= html_tag :lang => "en" do %>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <%# Turbolinks... sigh. If you're going to remove this line, please make sure you know what
      you're doing. Please read very carefully: https://github.com/turbolinks/turbolinks %>
    <meta name="turbolinks-cache-control" content="no-cache">

    <title><%= page_title %></title>

    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag "application", media: "all", 'data-turbolinks-track': 'reload'%>
    <%= javascript_include_tag 'https://cdn.pagesense.io/js/speakeasy/9f3a42c9ff114ad3806bf857959032a5.js' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= yield :styles %>

    <%= render 'layouts/external_js_libs' %>
    <%= yield :external_js_libs %>
    <%= javascript_include_tag "application", 'data-turbolinks-track': 'reload' %>

    <%= csrf_meta_tags %>

    <%= yield :javascript %>
    <%= yield :head %>
  </head>
  <body class='<%= @body_class %>' data-js-libs='bootstrap fitie metis forms sidenav prism clipboard bs-switch <%= yield :js_libs %>'>

    <!-- <div class="container-fluid">
      <div class="row">
        <%= flash_messages %>
      </div>
    </div> -->
    <%= yield %>

  </body>
<% end %>

application.css.scss

@import "snackbar";
@import "snackbar-material"; //optional

.snackbar.error {
  background-color: red;
}
.snackbar.alert {
  background-color: yellow;
  color: black;
}
.snackbar.notice {
  background-color: green;
}

我已经在这个问题上工作了几个小时，所以任何帮助将不胜感激！

重复的.snackbar Flash消息

0 个答案: