Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

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.

share|improve this answer
    
I would also suggest to add the js file in one of the libraries inside your root site collection, rather that the _layouts folder. This would help you in easily restoring the site into different environments, together with all your dependent files rather than copying the files and folders from the file system. Hope you have understood. –  Deepu Nair Feb 14 '12 at 15:44
    
And the library approach allows for versioning if you're like me and prefer to just use jquery.js as the filename. You can upload new versions and revert back to previous versions easily. –  PirateEric Feb 14 '12 at 17:18

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
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.