Clever Geek Handbook

Failed to close message [: notification] using Bootstrap with Rails 4

Using Bootstrap 3 with a Rails 4 app, I have set flash [: notice], flash [: error], flash [: alert] in the file application.html.erb

like this:

<!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">
  <title></title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head> 
<body>
  <div class='container'>
    <ul class='nav nav-tabs'>
      <li><%= link_to 'Wikis', wikis_path %></li>
      <div class="pull-right user-info">
      <% if user_signed_in? %>
        Hello, <%= link_to current_user.name, edit_user_registration_path %> |
        <%= link_to 'Sign Out', destroy_user_session_path, method: :delete %>
     <% else %>
        <%= link_to 'Sign Up', new_user_registration_path %> or
        <%= link_to 'Sign In', user_session_path %>
     <% end %>
      </div>
   </ul>
 </div>

 <% if flash[:notice] %>
 <div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <%= flash[:notice] %>
 </div>
 <% elsif flash[:error] %>
 <div class="alert alert-danger">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <%= flash[:error] %>
 </div>
 <% elsif flash[:alert] %>
 <div class="alert alert-warning">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <%= flash[:alert] %>
 </div>
 <% end %>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/bootstsrap.min.js"></script>

 <%= yield %>

</body>
</html>

When I receive a notification, error, or warning in my development and production apps, I cannot close it. I tried moving two scrpt src

around, but it doesn't seem to have any effect.

+3


source to share


2 answers


Update . I was able to fix this by adding //= require bootstrap

to my file application.js

:



//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
+7


source


In Bootstrap 4, you don't need to require all Bootstrap. If that's all the JS you need, just do:



//= require bootstrap/alert
//= require bootstrap/util
0


source






More articles:


All Articles