jQuery not loading in DOM Window

Question

All, I've got the following code:

$(document).ready(function() {
// more code using $ as alias to jQuery
alert('it works');
},'jQuery');

When the page loads I get the following error:

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

I've loaded jQuery before I tried to add this.

Here is how this was loaded (my code is the custom.js):

<script type='text/javascript' src='http://localhost/oml_live_update/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://localhost/oml_live_update/wp-content/themes/alyeska/framework/frontend/assets/plugins/prettyphoto/js/jquery.prettyPhoto.js?ver=3.1.3'></script>
<script type='text/javascript' src='http://localhost/oml_live_update/wp-content/themes/alyeska/framework/frontend/assets/js/superfish.js?ver=1.4.8'></script>
<script type='text/javascript' src='http://localhost/oml_live_update/wp-content/themes/alyeska/framework/frontend/assets/js/flexslider.js?ver=1.8'></script>
<script type='text/javascript' src='http://localhost/oml_live_update/wp-content/themes/alyeska/framework/frontend/assets/js/roundabout.js?ver=1.1'></script>
<script type='text/javascript' src='http://localhost/oml_live_update/wp-content/themes/alyeska/assets/js/alyeska.min.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/oml_live_update/wp-content/themes/alyeska/assets/js/custom.js?ver=1.0'></script>

Any ideas on why this won't work?

When are you loading the jquery script before or after this code? — Gabe
– Gabe, Commented Mar 14, 2012 at 22:55
You are doing something wrong. May be you haven included jquery file. It is working on jsfiddle — Dips
– Dips, Commented Mar 14, 2012 at 22:58
Did you try to check if the first script actually loads any code? — arvidkahl
– arvidkahl, Commented Mar 14, 2012 at 22:59

Jasper · Accepted Answer · 2012-03-14 23:10:32Z

2

$(function() {
    alert('it works');
});

Does that not work for you? This is a standard syntax for this: http://api.jquery.com/ready/

If you want to create an IIFE (immediately invoked function expression):

(function ($) {
    alert('it works');
})(jQuery);

This creates a new scope for the code within and passes in the jQuery object as $.

Update

I don't use WordPress but my understanding is that $j=jQuery.noConflict(); is run, so jQuery is basically stored in the $j variable (if it isn't done automatically then it needs to be done manually):

<script type='text/javascript' src='http://localhost/oml_live_update/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script>
$j = jQuery.noConflict();
$j(function () {
    alert('it works');
});
</script>
...

Also note that you can pass $ into the anonymous function that is the document.ready event handler so you don't have to use $j:

$j(function ($) {
    alert('it works');
    //you can now use $() instead of $j()
});

Update

Have you tried using jQuery in place of $?

jQuery(function($) {
    alert('it works');
    //since `$` was passed into this function, it can be used instead of `jQuery`
});

edited Mar 14, 2012 at 23:10

answered Mar 14, 2012 at 22:57

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

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

3 Comments

user1048676 Over a year ago

I'm using it in Wordpress so I'm doing that because of the noConflict that Wordpress has.

Jasper Over a year ago

@user1048676 See the update to my answer. I don't know if WordPress does the $.noConflict() on its own or if you have to.

Jasper Over a year ago

@user1048676 Check-out my last update. You should just be able to use jQuery in place of $ in the global scope.

Starx · Accepted Answer · 2012-03-14 22:58:25Z

0

The problem is probably the conflicting versions. Use

<script>
    $.noConflict();
    $(document).ready(function() {
    // more code using $ as alias to jQuery
    alert('it works');
    }); //You dont need to pass the pass the extra 'jQuery' Parameter
</script>

answered Mar 14, 2012 at 22:58

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

Lawrence Taur · Accepted Answer · 2012-08-17 12:29:21Z

I had a similar problem,

in my case, the superfish menu was working fine, but i would still get this error.

i had

<script>  
    $(document).ready(function(){ 
        $("ul.sf-menu").superfish({ 
            pathClass:  'current' 
        }); 
    });  
</script>

and firebug would point to the pathClass.

TypeError: $("ul.sf-menu").superfish is not a function
[Break On This Error]     

pathClass:  'current'

This may not work for you, but try and remove that entire script call, i.e

<script>  
    $(document).ready(function(){ 
        $("ul.sf-menu").superfish({ 
            pathClass:  'current' 
        }); 
    });  
</script>

, it worked for me, still trying to figure out how its reading the menu, but it worked. Firebug wont bug me, IE wont tell me its not secure.

Collectives™ on Stack Overflow

jQuery not loading in DOM Window

3 Answers 3

Update

Update

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

Update

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related