As you can see, most of the menu templates for the DDRMenu make use of jQuery. We all love jQuery, it makes our sites fast and pretty! Unfortunately, as several people have noticed, even with the jQuery support added in DNN v5 it is still difficult to use jQuery in a DNN module or skin object without running the risk of conflicting with another module on the site that also uses it. The trouble is, when you’re building a module for general distribution any of the following might or might not be the case:

• The skin or DNN portal doesn’t load jQuery at all.
• The skin or DNN portal loads a version of jQuery earlier than the one you need.
• A module further up the page loads a version of jQuery earlier than the one you need.
• A module further down the page is going to load a version of jQuery earlier than the one you need and splat your instance.

There’s been a bit of community discussion about how best to get around this, so I thought I’d share my approach. Basically, I came to the conclusion that server side code wouldn’t be able to handle a badly behaved module that loaded jQuery v1.1 into the middle of the page when v1.3 was needed, so I went for the following client-side method:

1. If a suitable version of jQuery is already loaded, store a reference to it.
2. If not, load the preferred version of jQuery and store a reference to it, but use noConflict(extreme) to avoid affecting any earlier version of jQuery that has been loaded.
3. Use the failsafe version of the ready function to allow safe use of the $ alias.

The actual code looks like this (assuming we need version 1.3):

<script type="text/javascript"> 
    // If we don’t already have a jQuery reference stored from another module 
    if (!window.myjQuery) { 
        // If supported version of jQuery already loaded 
        if (window.jQuery && (jQuery.fn.jquery >= "1.3")) 
            // save a reference to it 
            myjQuery = jQuery; 
        else 
            // Load our required version of jQuery 
            document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></' + 'script>'); 
    } 
</script> 
<script type="text/javascript"> 
    // If we didn’t manage to get a reference to an already loaded jQuery 
    if (!window.myjQuery) 
        // Store a reference to the one we loaded in extreme no-conflict 
        // mode in case a previous version was already loaded 
        myjQuery = jQuery.noConflict(true); 
</script> 
<script type="text/javascript"> 
    // Call the ready function specifying the $ alias 
    myjQuery(function($) { 
        // Your module's jQuery code goes here 
        $("p").text("DNN plus jQuery rocks!"); 
    } 
</script>

It’s a lot smaller if you get rid of the comments and whitespace, of course! Also, being entirely run on the client, it also should work in any other CMS, regardless of the server platform.

Anyway, I’d be interested to hear what others think of this approach. Are there any problems you can see with it?