Why do I receive an Uncaught ReferenceError: $ is not defined – Twitter bootstrap

I have a simple show page that has this haml code at the top of the file:

:javascript
  $(document).ready(function() {
    alert('Come on work.....');
  });

When I load the page, I receive this error in the console Uncaught ReferenceError: $ is not defined

The problem seems to be similar to this question here (Uncaught $ error).

My application.js looks like this:

#= require jquery
#= require jquery_ujs
#= require jquery-ui
#= require underscore-min
#= require chosen.jquery.min
#= require app
#= require_tree .
#= require twitter/bootstrap
#= require d3.min
#= require highcharts/highstock
#= require highcharts/highcharts-more
#= require highcharts/solid-gauge
#= require tagcloud
#= require ace-element.min
#= require tipso.min

# Remove the following trigger when TurboLinks are re-enabled
  $(document).ready ->
    $(document).trigger 'page:change'

I could use some help as to how I can continue trouble shooting all my other javascript files are working fine so I’m not sure what the problem is.

UPDATE

I’m not sure I’m understanding correctly but I’ve already tried reordering the files in application.js to this:

#= require_tree .
#= require jquery
#= require jquery_ujs
#= require jquery-ui

And I get a new error saying that JQuery is not defined. I thought by having this in application.js file the jquery would be present everywhere. What am I missing here. Do I need to include the actual files in my show.html.haml pages?