1

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.

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:

<script>
            $(function() {
                swMegaMenu.init();
            });
        </script>

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

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

</script>

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;
brasofilo
  • 25,496
  • 15
  • 91
  • 179
Stokken
  • 35
  • 2
  • 7
  • How are you including jquery? WordPress runs it in [noConflict() mode](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers) by default. – rnevius Nov 06 '14 at 10:59
  • Yes, it looks like you don't have jQuery. – Emmanuel Delay Nov 06 '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 06 '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 06 '14 at 11:14

2 Answers2

0

Try following code

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

</script>

var swMegaMenu = (function($) {

 var $listItems = $( '#sw-hrmenu > ul > li' ), // Uncaught TypeError: Undefined is not a function
  $menuItems = $listItems.children( 'a' ),
  $body = $( 'body' ),
  current = -1;
Bhumi Shah
  • 9,323
  • 7
  • 63
  • 104
0

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.

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:

(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.

rnevius
  • 26,578
  • 10
  • 58
  • 86
  • Thanks for your answer :) I have tried this. But i get this error istead: – Stokken Nov 06 '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 06 '14 at 11:28
  • 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 06 '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 06 '14 at 11:33