Referencing jQuery from Masterpage and WebPart

Question

I am referencing jQUery from my MasterPage as follows:

<SharePointWebControls:ScriptLink runat="server" Name="/_LAYOUTS/myprojIntranet/js/jquery-1.7.1.min.js" Localizable="false"/>

And in my webpart I reference it as:

ScriptLink.Register(Page, "/_Layouts/myproj2/js/jquery-1.7.1.min.js", false);

I have two copies of the file on my page. This must be because even though the content of the file is the same the references are different.

What is the best way to reference jQuery and only include it once? I am trying to make it so my features are not dependant on each other to run. Especially WebParts should not rely on the branding feature.

Should I create a jQuery feature and make my web part feature and my branding feature reliant on that?

Answer 1

Try using the same path for both includes.

As for the best way, I usually include it in the Master Page so that I know it is available to any page on the site rather than only places where the one webpart is used. It usually comes in handy down the road.

Answer 2

May be as an option you can download jQuery dynamically (if your page is not using jQuery). Sometimes it may be useful,for example, you may don't know, where your web part will be used - with jquery inclusion in master page or not.
In the past I've implemented simplest loader:

JSLoader = function (pathToScript, successCallback) {
    var script = document.createElement("script");
    script.async = true;
    script.type = "text/javascript";
    script.src = pathToScript;
    var loaded = false;
    var succcessFunction = successCallback;
    this.load = function () {
        script.onload = script.onreadystatechange = function () {
            if ((script.readyState && script.readyState !== "complete" && script.readyState !== "loaded") || loaded) {
                return;
            }
            loaded = true;
            script.onload = script.onreadystatechange = null;
            succcessFunction();
        };
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(script, s);
    };
};

and use something like this:

if(typeof jQuery == "undefined"){
var jsloader = new JSLoader("/_Layouts/myproj2/js/jquery-1.7.1.min.js", function () {
        //jquery loaded
    });
    jsloader.load();
} else {
   //jquery already included
}