jQuery not loading in DOM Window
Question by user1048676
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?
Answer by Jasper
$(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`
});
Answer by Starx
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>
