Question

I am using a master page, and JQuery is referenced in some, but not all pages. I am adding some user controls which use client side JQuery, and so need to include the reference to the jQuery library in the pages using them.

There are obviously many ways to achieve this but I was wondering thoughts on relative merits disadvantages of the following techniques (or if indeed a better technique exists):

1. Add a script element (by creating an HTMLgenericControl with the relevant attributes) to the header controlCollection – cons -> several script elements pointing to the same file may be served to the client, if the page and a few user controls all use jquery. Is this really a disadvantage? will the browser try and download several copies?

2. Add a masterPage boolean property jQueryLib & add the script element as above only if it has not already been added. Disadvantage – in the case of masterpages, I am not able to set the properties in the ASP, as I can with user controls. Thus all pages will need more code-behind rather than a simple <%@ Page jQueryLib=”true”>

3. Use some fairly simple client side javascript to load jQuery and run associated script after the library is loaded if jQuery===’undefined’. Cons – the script tags pointing to the javascript utility function for doing this will still be in the header multiple times if a number of user controls are used on the one page. As an advantage however, this file is much, much smaller than the jQuery library.

4. Just put the script reference in the master page, even though only those logged in as administrators require any jquery functionality.

As always – thank you very much for your thoughts an apologies for my amateurish knowledge of all things html and asp.

Answer 1

You could only add jQuery to the MasterPage for administrators using something like the following:

Serverside:

protected bool administrator { get { return true; } }

Javascript:

function pageLoad(sender, args) {
    var administrator = "<%= administrator %>".toLowerCase() == "true" ? true : false;

    if(administrator == true)
        loadJQuery();
}

function loadJQuery(){
    var scriptTag = document.createElement("script");
    var filePath = "jquery.js";

    scriptTag.onload = function( loadEvent ){
        // This function runs when jquery is loaded
    }

    scriptTag.type = "text/javascript";
    scriptTag.src = filePath;
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
}