Bootstrap alert dismissal not working, rails 3.2

Question

using twitter bootstrap 2.0 with Rails 3.2 (css files in assets/stylesheets, not using less or sass right now)

I have an bootstrap styled error or success alert at the top of my screen (based on whether first word of message == "Error". I've added 'bootstrap.js' & 'bootstrap-alert.js' to the assets/javascript folder.

Here is the code in my layout:

<% flash.each do |name, msg| %>
  <% if msg[0..4] == "Error" %>
    <div class="alert alert-error fade in">
  <% else %>
    <div class="alert alert-success fade in">
  <% end %>
  <a class="close" data-dismiss="alert" href="#">&times;</a>
  <%= msg %>
<% end %>

In my assets/javascripts/application.js I have:

$(".alert-message").alert()
$(".alert-message").alert('close')

Not sure I need both? tried with .alert / .alert-error as well.

Nothing happens when I click the close symbol, I'm sure I'm missing something very obvious, but I'm new to using JS /w Rails, can't figure this out. In the Chrome JS console I see this error message, which seems to be about bootstrap-alert.js data-api:

Uncaught TypeError: Object [object Object] has no method 'on'

Many thanks for any tips!

Answer 1

I had the same issue, and looked at your answer bobomoreno, but it didn't work. I later found out that the newest version of Bootstrap requires jQuery 1.7.x and doesn't work with older versions of jQuery.

Answer 2

I had the same problem - alert dismissal did not work for me. Solution was similar to bobomoreno's, but not the same. I had a file app/assets/javascripts/bootstrap.js.coffee with some custom stuff, which was required instead of bootstrap's javascripts. I fixed it by changing name to bootstrap-custom.js.coffee, so bootstrap's files was properly required.

Answer 3

As stated in comments, the problem seems to have been caused by competing Javascript files.

The problem was caused by having 'jquery.js' and 'jquery-ui.js' also in the Javascripts folder, must be having clashing names/classes.

After removing the jQuery files the js error disappeared on loading the page and the alert-dismissal works now