Inserting JQuery into your SharePoint site as a feature


To get JQuery to work within your SharePoint environment you need to store the JQuery javascript file somewhere. The choices you have really are;

  • On the file system
  • Within a SharePoint Library.

     

Once this file has been placed in one of these places you will then need to call it to use it.

The options could be;

  • Placing a link within the MasterPage
  • Calling from within a custom page
  • Calling from within a web part
  • Dynamically through code
  • AdditionalPageHead delegate control.

In this example I’m going to show you how to create a feature that will insert the JQuery file directly into the _Layouts folder and add a script link directly to the page. The advantage of making it a site feature allows you to only have the scripts included if you know jquery is being used on the site. Otherwise you are just loading up the JQuery files on each page for no reason.

First you will need to download the latest jquery file from the jquery site. http://jquery.com/

  1. Open visual studio and chose File > New Project
  2. Select SharePoint > 2010 > Empty SharePoint Project. Name the project JQuery and click OK.

  3. In the next dialog, enter a valid URL and select Farm
    solution. We are using a Farm solution in this example because I’m storing the JQuery file in the layouts directory. Click Finish.

  4. Right click the project in the Solution Explorer and select Add > SharePoint “Layouts” Mapped Folder
  5. Under layouts right click and select Add > New Folder. Rename the folder to be call inc. Then move the Jquery folder to be inside the inc folder. The reason why we use the inc folder is because I was told or read somewhere that this folder is automatically cached. As the Jquery file doesn’t change it is ideal to place here. (Unfortunately I cannot find where I read this information, if anyone can confirm or deny this I would be very grateful).

  6. Under the Jquery folder, right click and select Add > Existing Item. Locate where you downloaded the JQuery file and add it.

  7. Now right click the project and select Add > New Item. Select a Module and name the module ScriptElement. Click Add.
  8. Delete the Sample.txt file. Now open the elements.xml and change the file to look like the following.
    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction Location="ScriptLink" Sequence="1" ScriptSrc="~site/_layouts/inc/jQuery/jquery-1.7.1.min.js" />
    </Elements>
    
  9. You might have noticed that when you added the Module a Feature was created. Rename the feature to JQuery. Double clikc the JQuery.feature folder, this will allow you to change the title and description. Change the Scope to Site and also add the ScriptElement module as an item in the feature.
  10. That’s it. Deploy your solution. On your site you should see it has been deployed and activated.
  11. To ensure it is currently working, you need to see if the JQuery script is loaded on the page. If using Internet Explorer, press F12 and load up the developers tools. In the Script tab, you can select which script to debug, you should see the jquery file.
  12. If you deactivate the feature, and then check again, you will find it isn’t showing.
Advertisements