How to fix “undefined is not a function” in WordPress [duplicate]

This question already has an answer here:

I am converting a megamenu from HTML/CSS/JavaScript to work in WordPress. I have created a working walker and all is set. The problem is, I can't get the JavaScript to work. The JavaScript is supposed to trigger the top level li to open a mega menu section when clicked and also close it when clicked again.

li

I have used this JavaScript file:

var swMegaMenu = (function() {

var $listItems = $( '#sw-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;

function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}

function open( event ) {

if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'sw-hropen' );
}

var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();

if( current === idx ) {
$item.removeClass( 'sw-hropen' );
current = -1;
}
else {
$item.addClass( 'sw-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}

return false;

}

function close( event ) {
$listItems.eq( current ).removeClass( 'sw-hropen' );
current = -1;
}

return { init : init };

})();


And I have inserted this into the footer.php:


$(function() {
swMegaMenu.init();
});



The problem is I get this error in the footer.php:


$(function() { // Uncaught TypeError: Undefined is not a function
swMegaMenu.init();
});




and this error in the JavaScript file:

var swMegaMenu = (function() {

var $listItems = $( '#sw-hrmenu > ul > li' ), // Uncaught TypeError: Undefined is not a function
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

How are you including jquery? WordPress runs it in noConflict() mode by default.
– rnevius
Nov 6 '14 at 10:59

Yes, it looks like you don't have jQuery.
– Emmanuel Delay
Nov 6 '14 at 11:02

Doesnt wordpress allready run jquery? I am enqueue script like this with dependency of 1.9.1: wp_register_script( 'megamenu-js', get_template_directory_uri() . '/inc/megamenu/swMegaMenu.js', array( 'jquery' ), '1.9.1', true ); wp_enqueue_script( 'megamenu-js' );
– Stokken
Nov 6 '14 at 11:08

@Stokken Yes, WordPress already enqueues jQuery by default. See my answer for why it's not working for you.
– rnevius
Nov 6 '14 at 11:14

2 Answers
2

You're using WordPress's default jQuery instance, but you're not using noConflict() wrappers.

In the noConflict() mode, the global $ shortcut for jQuery is not available. This is why you're seeing an undefined error.

noConflict()

$

undefined

To correct this problem, you need to either replace all instances of $ with jQuery, or wrap the entire set of functions with a wrapper. For example:

$

jQuery

(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
})(jQuery);


Read more in the Codex.

Thanks for your answer :) I have tried this. But i get this error istead: (function($) { // Cannot read propery 'init' of undefined swMegaMenu.init(); })(jQuery);
– Stokken
Nov 6 '14 at 11:26

If you're no longer getting the undefined error, my answer solves you problem. If that's the case, please select this question as resolved, and open a new question with the new issue you're experiencing.
– rnevius
Nov 6 '14 at 11:28

undefined

Yes i will :) But i still get the undefined error in the javascript file. Should i wrap the whole file also? Tried what Bhumi Shah wrote also. But didnt solve the undefined case in that file.
– Stokken
Nov 6 '14 at 11:32

Your second error has nothing to do with jQuery, it is stating that your Mega Menu script isn't loading properly.
– rnevius
Nov 6 '14 at 11:33

Try following code


(function($) { // Uncaught TypeError: Undefined is not a function
swMegaMenu.init();
})(jQuery);



var swMegaMenu = (function($) {

var $listItems = $( '#sw-hrmenu > ul > li' ), // Uncaught TypeError: Undefined is not a function
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;

I have tried. But i get this error istead: (function($) { // Uncaught TypeError: Undefined is not a function swMegaMenu.init(); })(jQuery);
– Stokken
Nov 6 '14 at 11:28

which error you get?
– Bhumi Shah
Nov 6 '14 at 11:30