Jquery – rails and bootstrap: Uncaught ReferenceError: jQuery is not defined

jqueryruby-on-railstwitter-bootstrap

I created a simple webapp integrating bootstrap 3 in a rails 3.2.17 application, following this procedure found on stackoverflow, so without using a gem but manually copying the bootstrap files in the relevant app directories.

Even if i have, in my gem file:

gem 'jquery-rails'

i can still see, inspecting my web page with chrome, the error:

Uncaught ReferenceError: jQuery is not defined

My page is a "normal" html page in public directory. Maybe it doesn't "inherit" all the assets stuff? The code is like this:


<!DOCTYPE html>
<html>
<head>
    <title>Bootsrap Test 01</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>

...

I've not yet tried but i guess that javascript based feature won't work.

Best Answer

Assuming that after adding gem 'jquery-rails', you have ran bundle install command.

Make sure you have following in app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min   // Add it after jquery and jquery_ujs

EDIT

You will need to explicitly include jQuery before including /bootstrap.min.js. For example :

<!DOCTYPE html>
<html>
<head>
    <title>Bootsrap Test 01</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/assets/jquery.js" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>

Related Solutions

Javascript – Uncaught ReferenceError: $ is not defined

You should put the references to the jquery scripts first.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

Javascript – JQuery – $ is not defined

That error can only be caused by one of three things:

Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

First of all, ensure, what script is call properly, it should looks like

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

and shouldn't have attributes async or defer.

Then you should check the Firebug net panel to see if the file is actually being loaded properly. If not, it will be highlighted red and will say "404" beside it. If the file is loading properly, that means that the issue is number 2.

Make sure all jQuery javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});

This will ensure that your code is being loaded after jQuery has been initialized.

One final thing to check is to make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.

Note: If you're loading code which does not require jQuery to run it does not need to be placed inside the jQuery ready handler. That code may be separated using document.readyState.

Best Answer

Related Solutions

Javascript – Uncaught ReferenceError: $ is not defined

Javascript – JQuery – $ is not defined

Related Topic