Adding jQuery to Every Page in a SharePoint

I saw another blog post today where someone was showing how to use a delegate control to add the jQuery library to every page on a site. While that does work, there is a newer and much more elegant solution that doesn’t require nearly the same amount of work: the ScriptSrc attribute introduced in SharePoint 2010.

All you have to do is create a new custom action in a Feature and add a relative reference to the jQuery, or any JavaScript library for that matter. The library reference will be added to every page for the scope of the Feature so using this technique you could even add it to every single page in the farm. Here’s what it looks like…

I’ve only found two downsides to this approach. The first is that the jQuery library isn’t being pulled from a CDN like Google or Microsoft’s hosted options. I prefer to pull from these as it’s likely the user has already pulled from them before and it’s cached on their machine. The other downside is that I’ve seen this approach break the Asset Picker in SharePoint 2010 Publishing [WCM] sites.

One parting thought: I don't think it's a good idea to globally add a script to every page UNLESS you need it on every page. Else you're simply adding page weight for no good reason.

Technorati Tags: sharepoint,sharepoint 2010,jquery

posted on Monday, April 11, 2011 11:45 AM

Feedback

# re: Adding jQuery to Every Page in a SharePoint 4/11/2011 12:19 PM Vince

just have your local script declare the CDN jQuery script.

(function() {
var b = document.createElement("script");
b.type = "text/javascript";
b.src = "/path/to/CDN/jquery.min.js";

var a = document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(b, a);
})();

# re: Adding jQuery to Every Page in a SharePoint 4/11/2011 12:24 PM AC [MVP SharePoint]

@Vince - that's quite an elegant solution... very nice & thanks for adding!

# re: Adding jQuery to Every Page in a SharePoint 4/11/2011 2:27 PM Vince

you may want to declare 2 <script> tags: 1 to the CDN, 1 to your copy in case the CDN version doesn't load:

<script type="text/javascript" src="ajax.googleapis.com/.../script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='/path/to/your/jquery' type='text/javascript'%3E%3C/script%3E"));
}
</script>

StackOverflow:
stackoverflow.com/.../best-way-to-use-googles-h...

# re: Adding jQuery to Every Page in a SharePoint 4/11/2011 4:47 PM Gavin

I'm pretty sure that editing the jQuery Library and putting a jQuery.noConflict(); as the closing statement fixes the problems with the asset picker.

At least it did in my environment.

# "Page Weight" 4/12/2011 7:35 AM Marc D Anderson

Andrew:

I think that this part of your post "Else you're simply adding page weight for no good reason" may mislead some people who don't understand how browsers do caching for things like script files.

The "weight" added to the page (master page or individual pages) is the script reference itself, meaning:
<CustomAction Location=”ScriptLink” ScriptSrc=”~/layouts/jQuery/jquery-1.5.2.min.js” />

After the first download of that file (unless the user clears her cache), the browser will only check to see if there is a newer version on each page load. The file will not down go down the wire again unless it has changed. (There are some wrinkles to this in poorly configured corporate networks using F5s and such, but I'm talking about the basics.)

Using a CDN is a good idea in *some* cases (mainly public-facing ones, IMO), but even then, once you have the file, you have the file.

M.

# re: Adding jQuery to Every Page in a SharePoint 4/13/2011 9:06 AM AC [MVP SharePoint]

@Gavin - Nice tip... I'll take a look at that!
@Marc - Agree that one-size-fits-all doesn't always work, but if you have external access, I can't see a reason where you wouldn't want to do that. Also, your point about caching is correct, but I have actually seen some organizations that don't allow any caching... effectively they make their machines all run in InPrivate mode.

# re: Adding jQuery to Every Page in a SharePoint 4/13/2011 4:55 PM Marc D Anderson

Wow. That "no caching" thing is sort of nuts. I've never run into it. I'd love to hear why they think that's a good idea.

The external CDN decision has lots of wrinkles to it. One might belive that one could more reliably serve up the files locally. It certainly would be the case if an external connection wasn't reliable. As usual, it all comes down to governance decisions.

M.

# re: Adding jQuery to Every Page in a SharePoint 4/16/2011 8:16 PM AC [MVP SharePoint]

@Marc - Not really... for very secure operations it is very common. This is common within the US DoD (it was at one DoD intelligence agency I worked at for a year). Many others block it... it's just a minor thing they block... others include disabling all USB ports, etc.

# re: Adding jQuery to Every Page in a SharePoint 11/24/2011 7:43 AM Alexander

I think you need replace
~/layouts to ~/_layouts

Post Feedback

Title:
Name:
Email:	(email will not be displayed)
Url:
Comments:
Please add 7 and 4 and type the answer here: Remember Me?

All Comments Are Filtered & Moderated
Unfortunately comment spammers are just too effecient and are constantly dirtying up blogs with irrelevant and unwanted comments trying to improve their standing on search engines. All comments on this blog are moderated. I do not censor comments, but I don't approve comments with vulger language or those soliciting products. Most of the time comments are approved within a few hours of being submitted with the only exception when I'm traveling.

Why are you asking for my email address?
The only reason I'm asking for your email address, which isn't required to submit a comment, is to provide a gravatar if you've created an account for yourself and associated your email address with a small image. If you have a gravatar created for the email address you submit, it will appear next to your comment. Otherwise nothing will appear.

What is a gravatar?
A gravatar is a "globally recognized avatar." You can get more information about gravatars, as well as create your own for free, at www.gravatar.com. You can also view my gravatar here.

This work is licensed under a Creative Commons License