Prevent jQuery multiple reference

Question

I am developing DNN modules and I am using jQuery in some modules, I add the jQuery reference to the top of each ascx file, by the way when user add multiple modules to the page it references every time when modules are added, this situation gives some errors, when I remove the reference from the module which is bottom of the other module which both use jQuery, they work well, is there a way to prevent multiple reference the jQuery ? I mean if it is referenced on the page before it won't reference again. Thanks.

Answer 1

You could make small script to check if jQuery is present on the page, and only if is not present, load it:

// 'load-jquery.js'
window.onload = function () {
  if (window.jQuery === undefined) {
    var script = document.createElement('script');
    script.src = 'path/to/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(script); // load jQuery
  }
};

Answer 2

If you're on DNN 5.x, you should be using the DNN core's version of jQuery, by calling DotNetNuke.Framework.jQuery.RequestRegistration().

If you're only dealing with conflict within your own modules, you can add the script in code and then check if it's already been added. We add jQuery manually into the header (create a generic HTML control, and add it to Page.Header.Controls), then call Page.ClientScript.RegisterClientScriptBlock() to create a script block to call jQuery.noConflict (so that it doesn't interfere with DNN's JavaScript stuff). You can then wrap the whole call to add jQuery in a call to Page.ClientScript.IsClientScriptBlockRegistered(), so that it only gets added once.