Recently I received an email from someone who had attended one of my DNN training sessions asking to clarify some questions about jQuery usage. This person was just getting started with jQuery in DNN, and had inherited a skin that loaded jQuery itself, but they also realized that DNN was loading jQuery as well. They noted that everything seemed to be working fine, but were a little apprehensive that one day things may grind to a halt.
Instead of just replying to the email, I’m going to answer these questions publicly in hopes that it benefits others.
How does DNN load jQuery?
Years ago (late 2008, I think), DNN 5.0 added direct support for loading jQuery. Since then, the right way to load jQuery from a skin or a module, is to ask DNN to register it for you. So think of it like this – every time DNN loads a page, it’s waiting for someone to say “I want jQuery!”. If nobody says that – it won’t be loaded. If one module or skin says that – it will be loaded once. If 20 modules ask for jQuery, it will still only be loaded once. Same goes for jQuery UI, which was introduced in DNN 6.
When jQuery or jQuery UI is loaded by DNN, the DNN options set in the Host settings are used:
So if DNN loads jQuery, and the skin/module loads jQuery, which is actually being used?
The answer to this one is quite simple. The last one to load will win. This is because both of the scripts will be defining the global jQuery object. So the second one will literally overwrite the first one.
Any potential issues upgrading DNN, or using DNN modules?
If you are loading two different versions of jQuery, you may have functionality that depends on a particular version. If for some reason that version is being loaded first and getting overwritten by another (presumably older) version, your functionality would likely just stop working.
Additionally, there are some interesting repercussions for plugins when jQuery is loaded more than once, as plugins just extend the jQuery object. For example:
- jQuery is loaded by DNN. The jQuery object is defined.
- A jQuery plugin extends the jQuery object with its functionality.
- A skin or module loads jQuery. The jQuery object is redefined, and its like the plugin never got loaded.
Why do some modules have settings for loading jQuery?
In an effort to support multiple versions of DNN, module developers that create modules which depend on jQuery will often give the administrator an option to opt out of loading jQuery. If you’re opting out, the module developer assumes that you’re loading it via some other mechanism, presumably through the core functionality in DNN.
What to do?
Try to only load jQuery once. This means using the API to register jQuery if you are developing a module or skin. It also means telling any module that has the option to *not* load jQuery itself, but to use DNN.
Want to register jQuery the right way? Check out these community resources:
If you have any questions or any more techniques/resources please post them in the comments.