Question

I am getting an error in Firebug console:

TypeError: $.on is not a function
$.on('ajax:success', 'a[data-remote]', function(xhr, data, status) {

which is line 8 of my modal.js file – see below. I am using code from gist.github.com/1456815.

I can find the relevant jQuery v1.7.2 minified code in application.js:

f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object")

jQuery and then my modal.js code is being loaded by the asset pipeline, so I don’t understand the error, which shows in Firebug when my index page is loaded i.e. before I click on the link.

Versions: Ruby 1.9.3, gem 1.8.24, Rails 3.2.1, Rake 0.9.2.2

My application.js source:

//= require jquery
//= require jquery-ui
//= require jquery.dataTables
//= require TableTools
//= require ZeroClipboard
//= require datatable_highways
//= require datatable_localities
//= require datatable_neighbours
//= require_tree .
//= require modals

As per RailCasts #205 I have downloaded rail.js into /public/javascripts and renamed to jquery.rails.js. Frankly I don’t understand this and it is not explicitly included in the asset pipeline. (There seems to be confusion about what to do with rails.js in the forums).

jquery.js is in /vendor/assets/javascripts.

Modal.js.coffee:

# This file should be "required" into your `application.js` via the Asset Pipeline.

$ ->
  $modal = $('#modal')
  $modal_close = $modal.find('.close')
  $modal_container = $('#modal-container')

  # Handle modal links with the data-remote attribute
  $.on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
   $modal
    .html(data)
    .prepend($modal_close)
    .css('top', $(window).scrollTop() + 40)
    .show()
   $modal_container.show();

  $.on 'click', '#modal .close', ->
    $modal_container.hide()
    $modal.hide()
    false

Thanks
John

Answer 1

Do something like this instead:

$('#modal .close').on 'click', ->
    # code

Or, even better, to use your code:

$modal_close.on 'click', ->
    # code