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?

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.

  • 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, 2012 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. Feb 14, 2012 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) {
            loaded = true;
            script.onload = script.onreadystatechange = null;
        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
} else {
   //jquery already included

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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