During extensive SharePoint user interface customization you'll likely encounter a scenario where you need to make a web part or user control do something it was not intended to do or have a look that cannot be accomplished using the CSS hooks provided out-of-the-box. The solution is to create a custom master page and include a reference to a JavaScript file where you can modify the Document object. While straight JavaScript will do, I prefer to use the jQuery JavaScript library, which is far more robust, easier to use, and allows for plugins. Follow the steps below to add jQuery to your master page.
- Go to jquery.com and download the latest jQuery library to your desktop. You want to get the compressed production version, not the development version.
- Open SharePoint Designer (SPD) and connect to the root level of your site's site collection.
- In SPD, open the "Style Library" folder.
- Create a folder named "Scripts" inside of the Style Library.
- Drag the jQuery library JavaScript file from your desktop into the Scripts folder.
- In the Scripts folder, create a new JavaScript file and name it (e.g. "actions.js").
- Open your master page file in SPD.
- Within the <head> tag of the master page, add a script reference to the jQuery library just above the content place holder named "PlaceHolderAdditonalPageHead" (and above your custom CSS references, if applicable) as follows:
<script src="/Style%20Library/Scripts/{jquery library file}.js" type="text/javascript"></script>
- Immediately after the jQuery library reference add a script reference to your custom scripts file as follows:
<script src="/Style%20Library/Scripts/actions.js" type="text/javascript"></script>
Your custom master page now includes jQuery and a reference to your custom scripts file where you can add jQuery scripts. SharePoint includes a number of JavaScript files throughout the site, so be careful that the scripts you add do not conflict with SharePoint's; the jQuery library itself does not conflict with SharePoint.
ICF Ironworks is always on the lookout for experienced professionals who believe in hard work, having fun, and great client service.
Sign up to receive Ironworks' quarterly e-newsletter for the latest news, events, client successes, industry insights and more!
And of course this is not THE solution, let alone the best way, to add custom JavaScript or jQuery to SharePoint. This is just a solution.
For example your way is not recommended:
- when you just use jQuery on one specific page
- when you only need jQuery after the page has loaded
- when you are not even sure if the user will use your jQuery customization on the page (e.g. tooltips)
- etc.
Posted by: Christophe | 02/05/2010 at 01:17 AM
Christophe, correct, this solution assumes jQuery is used throughout the site. If you want to use jQuery on specific pages, you can include the jQuery references from the post on specific page layouts in the PlaceHolderAdditionalPageHead content place holder.
Posted by: Brandon Anderson | 02/05/2010 at 09:30 AM
Can the tag be placed in a content placeholder? What would you do if you only had 1 page that needed to call jquery and that page is a common page layout but the jquery isn't need on any other page?
Posted by: Ming Jones | 10/27/2010 at 03:23 PM
You can reference the script tag from the head tag, like shown, or anywhere in the body. If I need to call the jQuery from only a particular page, I'd add a Content Editor Web Part (CEWP) to a web part zone. I'd edit that CEWP in HTML view and add my script references (or the scripts themselves). That way the jQuery only takes place on that page.
Posted by: Brandon Anderson | 10/27/2010 at 03:32 PM
Thanks for that tip - new to SharePoint so I wasn't familiar with CEWP and all this time I thought SharePoint was against users using or tags.
Posted by: Ming Jones | 10/27/2010 at 04:27 PM
Hi Brandon, let say if I dont have access to the SPD, also Master page on the server,layouts. All that I can do is though Sharepoint GUI and I want to use JQuery on a specific site in a Content Editor Web Part, how should I go about it ? I would appreciate your help.
Posted by: Dhaval | 02/16/2011 at 12:09 PM
Dhaval, given your access restrictions, you can add a Content Editor Web Part (CEWP) to the page. Inside of that CEWP, in the HTML editor view, you can drop in the script reference to your jQuery library file like I have in step 8 in the post above. Alternatively, instead of referencing the jQuery library hosted on your server (which you may not have the ability to add) you can reference the jQuery library on Google's Content Delivery Network. The code you would use for that is [lt]script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"[gt][lt]/script[gt].
Now that you have your CEWP referencing the jQuery library, you need to specify what you want to do with jQuery. So, in the same CEWP, in HTML edit view, after your jQuery library reference tag, add another script tag, inside of which you can put your jQuery statements. That would look like this: [lt]script type="text/javascript"[gt]
$(document).ready(function(){
$("p.hide").fadeOut();
// some statement
});
[lt]/script[gt]
Posted by: Brandon Anderson | 02/16/2011 at 01:00 PM
Another easy way to include javascript, and still leverage some great stuff from .net/sharepoint is to use the tag. I wrote a little walkthrough here Adding Javascript to a SharePoint 2010 Master page. It allows you to reference your path from the sitecollection or site root. Pretty handy if your master page will be used in subsites.
Posted by: Steve Ottenad | 03/09/2011 at 08:01 PM
Thanks, Steve. I appears the link did not come through in the post. I'd be interested to hear your thoughts.
Posted by: Brandon Anderson | 03/14/2011 at 10:48 AM
I discovered another way to potentially add javascript to a custom master page to be used site wide. First, add the js file to your site's Site Pages, Site Assets, or other document library. Second, add a ScriptManager with a ScriptReference. In the ScriptReference's Path attribute, add the following:
[lt]% $SPURL: ~site/{Rest of Path here} %[gt]
In my case, I added jquery-1.4.2.min.js to my site's Site Pages library. The ScriptReference's Path used to reference it is:
[lt]% $SPURL: ~site/SitePages/jquery-1.4.2.min.js %[gt]
Posted by: LJ | 03/18/2011 at 08:57 AM