Home > jQuery, SharePoint 2010 > How to reference jQuery and custom javascripts in SharePoint2010

How to reference jQuery and custom javascripts in SharePoint2010

In normal asp.net development, in order to add jQuery to your solution you need to add the following script to your Master page.

<script language=”javascript” type=”text/javascript” src=”Scripts/jquery-1.4.1.min.js”></script>

There are not many differences in referencing jQuery in SharePoint2010; in fact you got quite a few ways to achieve this. The first thing you need to do is to deploy jQuery using SharePoint module template in Visual studio. Then you can choose one of the following ways of referencing jQuery.

1. Using a Delegate Control

2. in the master Page

<SharePoint:ScriptLink language=”javascript” name=”~sitecollection/Style Library/JavaScript/YBBESTCustom.js” Defer=”true” runat=”server”/>

<script  src=”/Style%20Library/JavaScript/YBBESTCustom.js”  type=”text/javascript”></script>

*****************Update on 12th Jan 2012***************

<script src=”/Style%20Library/JavaScript/YBBESTCustom.js” type=”text/javascript”></script> will only work for root site for the web application. aka , it will not work for site like http://yourwebapp/sites/yoursite.You should use the scriptlink or using the script manager.

********************************************************************

3. Ad hoc (e.g. in a site page or web part)

4. Using a Custom Action (Can be used as Sandbox solution, you can find example here.)

What MVP think about referencing Javascript in SharePoint2010

From Wictor Wilén

I’d say keep the JS files in the /_layouts/ folder. JS files do not need that much versioning and they are probably requested often if you references them in the master page, which will stress the Db unnecessary much if placed in SharePoint/content db.

It’s also easier to set up IIS compression etc on those folders.

Also consider using the <SharePoint:ScriptLink/> control.

This comment is from this MSDN forum post.

 

References:

jquery

How to bootstrap JQuery on every SharePoint page, even in the Sandbox

Referencing Javascript Files with SharePoint 2010 Custom Actions using SciptSrc

Reference Custom CSS and JavaScript files in SharePoint 2010

 

Advertisements
Categories: jQuery, SharePoint 2010
  1. Clem
    October 9, 2013 at 4:43 am

    defer=true is not valid and cannot be used in SP2010

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: