Error with adding JQuery

Question

I added JQuery to my HTML file:

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

Then I add a link to my JavaScript file:

<script src="public/javascripts/new_javascript.js" type="text/javascript"></script>

(I checked that this link work.)

In the file I do

$(document).ready(function() {
   alert("hey!");
});

But the Google Chrome developer tool shows an error:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

How can it be an error?

I'm doing this in Rails, and the HTML is like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
<script src="public/javascripts/prototype.js?1349898477" type="text/javascript"></script> 
<script src="public/javascripts/effects.js?1349898477" type="text/javascript"></script> 
<script src="public/javascripts/dragdrop.js?1349898477" type="text/javascript"></script> 
<script src="public/javascripts/controls.js?1349898477" type="text/javascript"></script> 
<script src="public/javascripts/rails.js?1349898477" type="text/javascript"></script> 
<script src="public/javascripts/application.js?1349898477" type="text/javascript"></script> 
<script src="public/javascripts/new_javascript.js?1351137775" type="text/javascript"></script>

This error is specific to jQuery not being loaded. Can you confirm jQuery is being included in your HTML BEFORE your script file? Can you give us an example of your HTML? — Matt Stone
– Matt Stone, Commented Oct 25, 2012 at 4:11
Prototype is overwriting the $ function used by jQuery. Why do you have them both? — gen_Eric
– gen_Eric, Commented Oct 25, 2012 at 4:16
Try jQuery instead of $ (because Prototype has overwritten $). — nnnnnn
– nnnnnn, Commented Oct 25, 2012 at 4:17

John · Accepted Answer · 2012-10-25 04:18:07Z

5

jQuery and Prototype conflict with each other. Try using jQuery instead of $ for jquery commands:

jQuery(document).ready(function() {
   alert("hey!");
});

answered Oct 25, 2012 at 4:18

John

4,3825 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Stone Over a year ago

More options are described at: docs.jquery.com/Using_jQuery_with_Other_Libraries

Sophistifunk · Accepted Answer · 2012-10-25 04:20:17Z

0

If prototype still overwrites $ like it's the dark ages, wrap your JQ code in a function like so:

(function($) {

    // Do whatever you like with $

    $(function() {
        alert("Document ready");
    })

})(jQuery);

answered Oct 25, 2012 at 4:20

Sophistifunk

5,1324 gold badges33 silver badges38 bronze badges

Comments

Eli · Accepted Answer · 2012-10-25 04:22:13Z

0

You can use jQuery.noConflict()

$.noConflict();
jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.

answered Oct 25, 2012 at 4:22

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Collectives™ on Stack Overflow

Error with adding JQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related