Wednesday, 22 August 2012

How to use Jquery in sharepoint 2010

How to integrate jquery with sharepoint in easy Steps


This tutorial will guide you step  by step on how to integrate Jquery into SharePoint, and the best part is being an end-user with no special administrative privilege you should be able to do the integration of  Jquery  into SharePoint... Guess that should have given you some happiness !!

Have you ever felt of having a nice pop-up on your SharePoint page when you hover your mouse over a link or an image? Yes that's what I would be showing you today. You can download all the necessary script and the files from this link :  

So let's download the zip file first. Download

Now let me take you through the steps, you don’t need to edit any SharePoint Master Pages or get the SharePoint Designer / Visual Studio all you need to do is just a "Content Editor Webpart" and a document library to store the "Jquery" Files. 

Do you want to see the pop-up working on your site straight away ? If So lets do it,   so that you can see how it looks in your SharePoint site ,  follow the below 2 simple step for you to get a feel of it.

Step 1.

Unzip the zip file you got now, copy the folder "jquery-bubble-popup-v3"  into a SharePoint  Document Library.

Step 2.

Open the Folder > Click on the html page you see here , "ClickMe.html" and that's it, it should open up the file where you can hover your mouse on the "mouse over here" text and  you should see a pop-up.. 

What you have done is, you have opened an html file and it is showing up the jquery pop-up, that should give you some happiness. Now the next step is to see how we can get the same pop-up in a SharePoint page and also how to link it to different elements like the image or the links
There is a small tidying up need to be done and put proper reference for this, You Ready ?
Step 1.

Navigate to the SharePoint page where you want to see the pop-up, insert a  Content Editor Webpart on the page. There is a file which you can find in the folder called "SharePoint JQuery Script.txt", this contains the script file which you need to insert to a Content Editor Webpart, so we need to put the right references here

Update the below three lines with appropriate path to the files in reference to your Site
(There is an easier way to find it, if you navigate to these actual files in your site and then hover your mouse over the file and click on the drop-down > Send To > Email a Link will give you the full path including " http://url" you can paste the same complete link here and SharePoint will trim this down for you...easy ya? )

 Step 2.

Once you have updated the above references,  select the Content Editor webpart (CEWP)> Select the "Format Text" tab on the Ribbon Control  > click on the HTML > Edit HTML Source
Copy the whole script code from "SharePoint Jquery Script.txt" updated with your reference and paste it in the CEWP.
















Paste the Script in the HTML box  > Click OK >  Save the Page.

Step 3.

Now when ever you paste any scripts in the CEWP, Sharepoint always does some editing to clean it up, so ensure you got the scripts without any spaces or changes else it wont work, double check it with the screen shot below.




Step 4.

If everything is fine then hover your mouse over the "click here" and then you should see a pop-up








Step 5.

You can create or associate this pop-up with any links or images on the page all you need to do is to copy paste the same code segment and create unique id and reference the Class id. 


























That's it;  so you have implemented Jquery in SharePoint, you could experiment with more features of Jquery.

Hope this article throws some light on the JQuery front...

Reference

This article have used Jquery Pop-Up with open license, refer the below link for more options on parameters

6 comments:

Anonymous said...

The click me page does not have any hover effect...I am using SP2010...Please help!

Joseph Jeethu said...

If you have followed all the steps it should definitely get it...What is the browser you are using?

Anonymous said...

Same here, does not work wit hthe hover.

Also, trying to run the ClickMe.html from a document libray does not work, you only get the option to save the file, not open it.

Could this be the same issue when it tries to interact with the script files?

Joseph Jeethu said...

Yes save it to your local machine and try, there are some browser settings which might not let you to run local files, need to be a bit more descriptive on the error to help you out...

Fallen Angel said...

Hi There, mine works fine following the scripts. However, it is not pulling the blue border from the themes folder.

Q: Where in the code refers to the "jquerybubblepopup-themes"?

Q: Where do I store the jquerybubblepopup-themes folder in SharePoint?

Joseph Jeethu said...

Hi Angel,

Q: Where in the code refers to the "jquerybubblepopup-themes"?
- It refers to the "jquerybubblepopup-themes" folder which resides in "Jquerypopup". It also contains many other themes which you can make use of.
Q: Where do I store the jquerybubblepopup-themes folder in SharePoint?
- You should ideally store it in the "Style Library" and reference the path.

HTH