Simple jQuery not working in Rail 3.2

Question

This one has had me going for a couple of hours now. Any help would be appreciated, let me know if I can provide any more information.

I am trying to get some basic jQuery working in my Rails 3.2 application. The jQuery in question is to provide an action on a button press (at the moment, just an alert dialog to know it's working).

app/views/orders/index.html.erb

...

<button type="button" class="btn" id="button">My button</button>

...

I have tried a number of variations for the jQuery/JS code, including...

apps/assets/javascripts/orders.js

$('#button').click(function() {
    alert("Test message");
});

.

$(document).ready(function() {
    $('#button').click(function() {
        alert("Test message");
    });
});

.

$(document).ready(function() {
    $('#button').button();
    $('#button').click(function() {
        $(this).button('loading');
    });
});

Some points to note:

• This is running in the development env
• The JS file is showing up in the source and in the Chrome network/resources panel without errors.
• I've tried re-ordering my application.js file.
• I am not adept with CoffeeScript yet, but am willing to try a CoffeeScript based solution.
• Chrome reports an error in Morris.

My app/assets/javascripts/application.js for reference

//= require jquery
//= require jquery_ujs
//= require raphael
//= require morris
//= require bootstrap
//= require_tree .

Any suggestions on steps to take to track down this bug would be very helpful!

---

Updates

Tried the following CoffeeScript solution with no luck.

jQuery ->
    jQuery('#button').click ->
        alert("Test msg")

// ... which generates ...

(function() {

  jQuery(function() {
    return jQuery('#jamcake').click(function() {
      return alert("You have cake?");
    });
  });

}).call(this);

Tried changing button to a link, to no avail.

Tried going back to basics, the following works.

alert("Hello");

However, the following does not...

$(document).ready(function() {
    alert("Hello there");
});

Answer 1

Try this one and check the console to make sure: The event is firing and that jQuery can find the element.

$(document).ready(function() {
    console.log($('#button').size());
});

If you get nothing you might have a conflict or the error with the other library is preventing the rest of the script to run.

Answer 2

.html

<button type="button" class="btn" id="first-test">My button</button>

.js

$(function() {
   $("button#first-test").on("click",function() {     
     alert(hi); 
   });            
});

Answer 3

A shot in the dark, but one of the other js libraries could be conflicting with jQuery's use of $

Try:

jQuery(document).ready(function($) {
  // code here, using $ as usual

  $('#button').click(function() {
    alert("Test message");
  });
});