bootstrap modal created inside coffeescript not working-Collection of common programming errors

My problem in a nutshell is that from within coffeescript implemented jQuery-UI handler, I cannot create and show a bootstrap modal. If I try to show the modal using the standard button approach that is on the bootstrap documentation it works just fine. EDIT 3: This is within a Ruby on Rails 3.2 application using the asset pipeline.

Launch demo modal

However, when I do this from within a jQuery-UI event handler:

$("#my-modal").modal('show')

or

$("#my-modal").modal({})

I get this error:

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

My html is very standard–I just used the example html from the bootstrap documentation. I have this coffeescript for the jQuery-UI event handler:

$ ->
  $("#selectable").selectable(
    selected: (event, ui) ->
      $("#my-modal").modal({})
  )

EDIT: As this smells of a scope issue I tried monkeying with the -> and => to see if that changed things but no changes to that made any difference.

EDIT 2: I’ve validated that the javascript libraries are included in the right order: jquery, jquery-ui, jquery_ujs, and then bootstrap.js. Is it possible that there’s another library I need to pull in?

I’ve validated that $(“#my-modal”) finds the modal DOM object correctly by doing

console.log $("#my_modal").html()

I’m at a loss to understand this. The code looks completely straightforward and simple to me.

1. I finally figured this out and thought I’d post the answer in case someone else runs into this.

   Someone else on our team had brought in Google Analytics using jQuery and that was reintroducing jQuery AFTER bootstrap had injected itself into jQuery, thereby removing bootstrap from the world.

   As we’re in the first stages of our project and our motto is to not try to solve next years problems today, I fired him and we waited out back for him when he left. Of course he’s my boss so none of that happened.

Originally posted 2013-11-15 09:11:17.