Я пытаюсь превратить все flash-сообщения в сообщения-закуски с помощью SnackbarJS.Мои флеш-сообщения были успешно превращены в сообщения в снэк-баре, но они отображаются дважды.Это глобальная проблема, которая возникает для всех flash-сообщений через мое приложение.
Документация по превращению flash-сообщений в сообщения «снэк-бар» находится здесь: Документацию о том, как это сделать, можно найти здесь: c https://github.com/elfassy/snackbarjs-rails
Например, каждый раз, когда пользователь входитих пароль безуспешно отображается в снэк-баре «Неверное имя пользователя или пароль» дважды.
Я почти уверен, что проблема связана с файлом application.js и может быть исправлена с помощью .preventDefault()
, но я 'Я не уверен, как реализовать это исправление.
Gemfile
gem 'snackbarjs-rails'
application.js
//= require snackbar
$.each( flashMessages, function(key, value){
$.snackbar({content: value, style: key, timeout: 10000});
});
session_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
Файлы макетов: приложение.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;
}
Я работал над этой проблемой часами, поэтому любая помощь будет принята с благодарностью!