Duplicate .snackbar Flash Message - PullRequest
0 голосов
/ 01 мая 2019

Я пытаюсь превратить все flash-сообщения в сообщения-закуски с помощью SnackbarJS.Мои флеш-сообщения были успешно превращены в сообщения в снэк-баре, но они отображаются дважды.Это глобальная проблема, которая возникает для всех flash-сообщений через мое приложение.

Документация по превращению flash-сообщений в сообщения «снэк-бар» находится здесь: Документацию о том, как это сделать, можно найти здесь: c https://github.com/elfassy/snackbarjs-rails

Например, каждый раз, когда пользователь входитих пароль безуспешно отображается в снэк-баре «Неверное имя пользователя или пароль» дважды.

Duplicate Snackbar Flash Image

Я почти уверен, что проблема связана с файлом 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;
}

Я работал над этой проблемой часами, поэтому любая помощь будет принята с благодарностью!

...