How do I get all my jquery elements to work together in Joomla

Question

I'm building a template in Joomla 3.2 with a touch activated menu (rather than rollover). Joomla automatically loads jQuery but for some reason, the script I've written for my menu won't work with the default loading scripts in Joomla so if I strip them out and add the Google include script right above my drop down script, then it works, but no other plugins will work. At the moment, I've restored the default Joomla loading scripts and my menu stops working. I can't figure out why. (I'm a major amateur when it comes to jQuery).

So right now, in the head of my document, Joomla loads the following like this:

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/tabs-state.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/system/js/modal.js" type="text/javascript"></script>

At the very end of the head section, I have the following for my drop down:

<script type="text/javascript">
$(window).load(function(){

        //close drop down by default
        $('.nav-child').hide(); 

        //handle drop down parent click
        $('.parent').click( function(event){
            event.stopPropagation();
            $(this).find('.nav-child').slideToggle();
            $(this).addClass("active");
        });

        //hide drop down when user clicks anywhere outside of drop down
        $(document).click( function(){
            $('.nav-child').hide();
            $("li.active").removeClass("active");
        });

</script>

You can see the site at http://www.suprememarineandsled.ca

Answer 1

That's because jQuery load mootool aswell, it use $ as initialisation. Since mootool is loaded after jQuery, $ === Mootool.

That's why when you load by hand the google lib, it work. It override the $ symbole with jQuery.

Make a closure and your script will work :

(function($){ // FUnction that accept an argument.
    $(window).load(function(){

        //close drop down by default
        $('.nav-child').hide(); 

        //handle drop down parent click
        $('.parent').click( function(event){
            event.stopPropagation();
            $(this).find('.nav-child').slideToggle();
            $(this).addClass("active");
        });

        //hide drop down when user clicks anywhere outside of drop down
        $(document).click( function(){
            $('.nav-child').hide();
            $("li.active").removeClass("active");
        });
    });
})(jQuery) //Sending jQuery to that function

Answer 2

My guess is the reason your jQuery code does not work when Joomla manages the loading of all JavaScript languages is there's a conflict with Mootools; which also uses the $ symbol extensivly.

To get the two to work harmoniously together you can either assign a different symbol for jQuery:

var $j = jQuery.noConflict();
$j(document).ready(function(){
    // All your code here
});

Or you could simply use jQuery instead of $:

jQuery(document).ready(function() {
    // All your code here
});

Or, wrap your JavaScript inside an IIFE (Immediately Invoked Function Expression:

function($) {
    $(document).ready(function() {
        // All your code here
    });
})(jQuery);

I prefer using IIFE's because it prevents any "global" variables assigned within from polluting the global namespace and because it still allows me to use $ symbol can easily migrate/copy existing code to use.

Any of these methods should "fix" any broken core Joomla functionality and allow you to run your jQuery code without any issues.

Hope this helps.