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

Question

my site is getting the error in this title in the javascript console. Google seems to say that it is because jquery isn't loaded, but it is definitely visible in the head.

<script type="text/javascript">
  $(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "https://www.mjfreeway.com/naturalremedies/mml-connect/45.xml",
      dataType: "xml",
      success: function(xml) {
        $(xml).find("products").each(function() {
          $(this).find("product").each(function() {
            $("#output").append($(this).find("title").text() + "<br />");
          });
        });
      }
    });
  });
</script>

the site is medical marijuana related, so nsfw for some.sorry for the messy head, it's in dev mode. http://www.kindreviews.com/1/mmc/

Thanks, zeem

@Patrick: I agree, the problem is, what code. It's a big combination of pieces. :-) — T.J. Crowder
– T.J. Crowder, Commented Apr 18, 2011 at 16:51
You can see the code in the site linked above (this one: kindreviews.com/1/mmc) — brandizzi
– brandizzi, Commented Apr 18, 2011 at 16:52
@zeemy23: This sort of problem is a matter of: Reduce, reduce, reduce until the problem goes away, and then look at the last thing you removed, add things back, etc. The good news is that the problem is reliable. The classic reason for this error is including a script using jQuery before including jQuery. My quick check didn't immediately show that that was what you were doing, but that page has a lot going on, so... — T.J. Crowder
– T.J. Crowder, Commented Apr 18, 2011 at 16:52
@brandizzi: Yes, but StackOverflow is meant to stand alone and endure; it's not just for solving @zeemy23's problem, but to be a reference for people encountering the same problems in the future to find. External links can get moved, get deleted, get modified... Also, ideally, people shouldn't have to follow a blind link in order to help. Tricky in this case, with this class of problem. — T.J. Crowder
– T.J. Crowder, Commented Apr 18, 2011 at 16:53

brandizzi · Accepted Answer · 2011-04-18 16:51:17Z

53

Apparently you are using both jQuery and Mootools and both of them do use $ as an alias to a core function. Probably the $ function which is generating this error is the Mootools function. I'd suggest you to try to write your jQuery code using jQuery instead of $ so you can confirm my point is right or not.

Good luck!

answered Apr 18, 2011 at 16:51

community wiki

brandizzi

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

4 Comments

zeemy23 Over a year ago

thanks for your help. Removing mootools led to this error now: Property '$' of object [object DOMWindow] is not a function

zeemy23 Over a year ago

was fixed with tbthorpe's answer, but still problem, see his comments.

T.J. Crowder Over a year ago

@zeemy23: You don't have to remove MooTools, you just have to make your code use the correct symbol for jQuery. If you use Chrome, put it in "break on all exceptions" mode and skip the first one (a 404 on one of your CSS files) and you'll see $.noConflict(); followed by $(document).ready(.... On that second line, $ no longer references jQuery, because that's what noConflict does, return teh symbol to its previous meaning (MooTools, in this case). Use jQuery(document).ready(... instead.

brandizzi Over a year ago

You should replace $ for jQuery in ALL jQuery code, not only in the original error line. I've noted the script has an $.ajax just unther the jQuery(document) line. It should be jQuery.ajax instead (and jQuery(xml), jQuery(this) and so on). HTH

tbthorpe · Accepted Answer · 2011-04-18 16:56:07Z

8

Yup - I believe that's exactly the problem. jQuery and mooTools fight over the use of the $ notation.

You're on the right track with using

try{
   jQuery.noConflict();
 } catch(e){};

But after you use that, in order to use jQuery functionality, you have to call it jQuery(...) instead of $(...). Example:

// Use jQuery via jQuery(...)
 jQuery(document).ready(function(){
   jQuery("div").hide();
 });

Here's a link to the jQuery docs regarding this: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

answered Apr 18, 2011 at 16:56

tbthorpe

7831 gold badge6 silver badges12 bronze badges

3 Comments

zeemy23 Over a year ago

thanks! your recommend worked, but now i'm getting a "Cannot call method 'ajax' of undefined" is it because the $ sign is in front of that as well?

tbthorpe Over a year ago

Yeah, you don't need the $ when you're using jQuery functionality. In fact, it will break if you do. Just replace the '$' with 'jQuery', and I believe it should work out for you.

DWils Over a year ago

you can also use: jQuery(document).ready(function($){ /* code with $ here */ }); and that will define $ for that local function scope only.

Bo Persson · Accepted Answer · 2011-10-01 21:14:47Z

0

I had the same error when I forgot to add the header-line:

<script type="text/javascript" src="/javascript/jquery-ui-1.8.14.custom.min.js">   
</script>

edited Oct 1, 2011 at 21:14

Bo Persson

92.9k31 gold badges153 silver badges211 bronze badges

answered Oct 1, 2011 at 13:09

Daj Shung

476 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related