Most of you have already worked with jQuery, if you have not shame on you.
I have worked with jQuery a lot the past years, client site scripting gives you more flexibility towards your customers.
The way you can manipulate the DOM is just great.
Many people find it hard to start with jQuery, the first step of the process is to get your jQuery into SharePoint.
There are several ways of doing this which I’ll be explaining to you in this post.
First we have to download jQuery here. Just save it somewhere so that you know were it is.
The ways that I know to import jQuery into SharePoint are the following:
- Put a reference into your MasterPage
- Put a reference in your webpart or your layouts page
- Load it programmatic
- Through the content editor webpart
- With a feature
1. Put a reference to Jquery
You can tell your webpart, layouts page and master page to load the script directly.
Keep in mind if you do this in the MasterPage then everywhere in your SharePoint the jQuery is loaded.
This technique is the most simple of loading the jQuery.
You have to open SharePoint designer for this, and open the site where you want to place the jQuery.
Next thing you have to select ‘all files’ and then catalog.
Next you have to select your MasterPage en select ‘Edit file in advanced Mode’
Next you will see the HTML and stuff of your MasterPage , there we can place a link to the jQuery file.
We can link directly to the jQuery site
or to our local JQuery file , stored somewhere in the layouts folder of SharePoint in this case
Next you just save and publish the masterpage and your are done.
And how do I know that it worked ????
If you open your IE explorer en type F12 which will open the development tools of IE, you’ll see a tab called scripts.
Told you it was simple.
This technique can be repeated for a VisualWebPart or a Layouts page.
I’m not gonna show because it is just copying the same script tags
2. Load the script programmatic
Personally I prefer this way.
It’s easy, it’s faster, no SharePoint designer, Visual Studio and so on
When you’re using jQuery you are going to develop something, so you’ll be using VS anyway.
So you can deploy the jQuery along with your solution.
I’m just gonna create a very simple webpart to demonstrate.
My Visual Studio project looks like this:
I added a link to the SharePoint Layouts/1033 folder in my Visual Studio, then I added the jQuery file which I downloaded earlier in this folder in Visual Studio.
Now let’s add this thing into our WebPart, but lets test this.
Lets create a simple “HelloWorld.js” that throws an alert when the page is loaded, and put this also in the 1033 folder.
Then you deploy the webpart and add it to your page, now every time the page is loaded it will throw an alert.
Using this techniques you do not have to open SharePoint designer every time you have to add a jQuery file.
To my point of view this techniques gives you way more flexibility.
3. Content Editor WebPart
This is the most simple technique there is.
Just edit the page add add a CEW.
Edit the webpart and just add this in the text:
Click ‘ok’ and you are done.
I find this more unprofessional but it would do the trick, but there are risks to it.
4. Using a feature
This is also a very simple technique to load the general jQuery files into SharePoint.
Add to your solution a new Module.
Delete the txt file that comes with the Module, and change the content of the Element.xml file to look like this:
In the screenshot you’ll see I have put the Module into a feature and that is it.
Go to your feature in SharePoint and activate
You can test with the development tools to check if the feature is deactivated and deactivated.
Hope it helps.
Leave a comment