Uncaught ReferenceError: jQuery is not defined

n_starnes picture n_starnes · May 21, 2012 · Viewed 9.7k times · Source

I am getting this error only in chrome for superfish drop down menu. It works fine in Firefox, and IE. It does not work in Chrome. The menu instead of being horizontal list itself Vertical. domain name of clients actual site has been changed below for confidentiality

<script type="text/javascript" src="http://www.domainname.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.domainname.com/js/superfish.js"></script>
<script type="text/javascript" src="http://www.domainname.com/js/hoverIntent.js"></script>
<script type="text/javascript">
    // initialise plugins
jQuery(function(){
     jQuery('ul.sf-menu').superfish();
    });
</script>

I have even changed it to the following and does not work:

    <script type="text/javascript">
         $(document).ready(function(){
            $('ul.sf-menu').superfish();
         })
    </script>

I looked at the view source and it is referencing two header files. This could be causing the error. I am using magento. The menu is working on all pages of the site except the one page checkout.

Fixed! read below will post as answer when it lets me in 7 hrs

The issue was not with the javascript itself, but with the css for the superfish menu. The developer who designed the layout and coded the template listed the stylesheet for the superfish menu as:

    <link rel="stylesheet" type="text/css" href="http://www.domainname.com/css/superfish.css" media="screen">

After removing the "http://www.domainname.com" and leaving it as "/css/superfish.css" it fixed the menu.

Answer

T.J. Crowder picture T.J. Crowder · May 21, 2012

The only reasons trying to use the symbol jQuery like that would cause a ReferenceError would be:

  1. If the script include for jQuery failed. Check your console for 404s and the like.

  2. If one of the later scripts actually deletes the jQuery window property, e.g.:

    delete window.jQuery;
    

    Just setting jQuery to undefined (perhaps via noConflict) wouldn't cause a ReferenceError, you'd get undefined is not a function or similar. But if you actually delete the property, then you would. (Except on IE, which won't let you delete properties from the window object.)