As we are well experienced with the JQuery in ASP.NET applications, JQuery is a client side script for executing really impressive logics, calling server-side methods, animations, smooth rendering etc.
SharePoint is a platform and which is built upon ASP.NET, so we can do all the stuff in SharePoint which we implemented in ASP.NET applications. Here is a small walk through of how to integrate the JQuery in SharePoint applications. We usually write lot of logics by using JQuery to get data from server using Ajax implementation by calling Page Web methods and render the data by using JTemplates etc… But We can’t implement the same in SharePoint because we can’t wriite page web methods. Reason behind is SharePoint don’t support page web methods because it is build with ASP.NET 2.0 version. Other than that you can implement all the logics in SharePoint as well.
Follow the steps below to integrate JQuery into SharePoint.
- Open your SharePoint site in SharePoint designer.
- It’s always better to organize your data and files in good structure. So create a folder for placing all scripts named “Scripts” if it does not exist.
- Now copy the Jquery script file to this folder. I am using the file jquery-1.3.1.js.
- Create an ASPX page in your pages folder of the site if it is a published web site template otherwise create a page in the root of site. [However, any place it works.]
- This page is not a web part page, we are just creating a simple ASPX page for JQuery integration.
- Here, add a reference to the JQuery java script file to the head tag of the page.
- Add the below code to test the Jquery functionality to body of the page.
- <script type="text/javascript">
$(document).ready(function() {
$("#cb").live('click', function() {
$("#lblMessage").text("you clicked on CheckBox, selected = " + $("#cb").attr('checked'));
});
});
</script><input type="checkbox" id="cb" />
<label id="lblMessage"></label> -
We just wrote a very small piece of code snippet for testing the JQuery functionality. This post main goal is to integrate the JQuery plug-in for SharePoint. The same way you can add reference to the master page of the site to get the advantage of JQuery in all pages of the web site.
-
We can apply the master page to the current ASPX page by following this post. This will give you the same look and feel as other pages.
-
We have plenty of ways to do this. For example, for simple integration purpose i explained you to place the JQuery file in scripts folder of the root of the web site. But good way of doing is, placing the file in Layouts folder of 12 hive in SharePoint system. This way you can access the file in any site and on any page through out the SharePoint. Because Layouts is the common sub site exist for all the sites.
-
Adding script reference to all the pages in a site:
- Add the script reference to the <HEAD> tag of the master page of the site. So that all pages have the reference to the JQuery script and you can use it any where.
- Syntax: <script type=”text/javascript” src=”/_layouts/scripts/jquery-1.3.1.js”></script>
- Add script reference to specific pages:
- For this we have a good and nice web part to add html/script/css. That is nothing but Content Editor Web part. We can add a content editor web part on the page [most probably on the top of page] and we will add the script reference code to it. Now the JQuery is available only for the pages where you added the code.
Nice, I think it could be interesting to add some more entries following this one, and probably it's not only me having this opinion. Cheers!Customized application development
ReplyDeleteThanks. Planed to post more, but things are going bit tight... Busy life. Surely you can expect more in this blog in next couple of days.
ReplyDeleteThis can work but it is not the most correct way. The real deal is to create a feature and deploy it to the SharePoint site. That way you could control a number of important stuff:
ReplyDelete- ensuring there is only a single reference to the js-file
- makeing it very easy to update the js-file version
- easy removal when not needed anymore
- etc.
It is not recommended to manually add files to 12-folder othen then by means of solution/feature deployment.
Finally, an almost non tech solution for WHERe to put all the good free stuff that is out there.
ReplyDeleteA non tech newbie learning 2010 Designer by trial and error thanks you!
Very good Post. It really helped me understand the juqery questions i had.
ReplyDelete