Dan Rubio Dan Rubio - 4 months ago 17
Javascript Question

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

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

$(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.


I'm not sure I'm understanding correctly but I've already tried reordering the files in
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


as @Pointy said the jQuery file needs to be included before your application.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="application.js"></script>