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

Answer 1

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!

Answer 2

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