Download
Introduction
Recently I was working on integrating JQuery with SP 2010 sites. This article will
be first of many articles that i would be covering as part of the JQuery Series.
This write up will discuss on how to integrate/use JQuery with share point 2010.
For developers to use the JQuery in share point it is mandatory to include the JQuery
file/plugin into the portal before they can start developing user interfaces using
it. We will start with a small “Hello World” program and look at how developers
can communicate with SP 2010 list using JQuery library for SharePoint web services.
JQuery integration with SharePoint Site collection
Following section describe how to do “hello world” code with JQuery and SP 2010.
This is important as this is a must step for you to integrate any JQuery library,
Plugins later.
1. Create Site collection, naming “JqueryDemo”.
2. Download the JQuery from Here. I have downloaded the “jquery-1.8.3.min.js” version
of the file.
3. Once downloaded, add it SharePoint document library called “JS”. This library
name can be can be anything based on your project requirements. All JavaScript files
and related JQuery files are added here.
4. Create a text file called as “Include.txt”, which will have references to the
JQuery file added above.
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
</html>
5. Add the “Incude.txt” file to “JS” document library created by above step. This
can again be any of the folders within your share point. Make sure you know the
relative path to the file.
6. For “Hello World” demo, let us include a below piece of code to a text file “QuerySharedDocuments.txt”.
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello World");
});
</script>
</head>
<body>
</body>
</html>
7. Add the “QuerySharedDocuments.txt” file to “JS” document library
8. Create a new share point page called "JQueryTest”
9. Navigate to the “JQueryTest” page or navigate to a page where you want to test
the above code.
10. Add a Content Editor Web Part.
11. Edit the web part to modify the content link to point to “/sites/JQueryDemo/JS/Include.txt”.
This will ensure that required java scripts and JQuery files are referred in this
page.
12. Title can be made blank for this content editor web part, as this will be used
only for referencing the JQuery files.
13. Add another content editor web part below this and modify the content link to
point to “/sites/JQueryDemo/JS /QuerySharedDocuments.txt”
14. Change the title of the content editor web part to “Shared Documents List”.
15. Save the page and run the page. Now it should display “Hello World” message
as below.
16. Now that we have successfully done a “Hello world” Program of JQuery
within SharePoint. Let us look at how to query a document library using JQuery.
2 Querying SharePoint Document Library
Following section will show how to query “Shared Documents” library through JQuery
and render the contents in a tabular format. For this you can either call the List
web service exposed by the SharePoint or you can use the JQuery library for SharePoint
web services from here. I would prefer to go with the latter options, as it much
more flexible and easy to write. You will need to download the latest JQuery file
from here. I have downloaded “jquery.SPServices-0.7.2.js” version.
1. Add the file “jquery.SPServices-0.7.2.js” to “JS” document library created above.
2. Include following line of code in “Include.txt” and upload it to “JS” document
library.
<html>
<head>
<script src="/sites/JQueryDemo/JS/ jquery-1.8.3.min.js " type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
</head>
</html>
3. Modify the “QuerySharedDocuments.txt” to query the “Shared documents” document
library and list all the items in a tabular format.
4. Add following html code to the between the body tag. This will be used to render
the HTML on the client side.
<table id="documentListtable">
<tr class="row-template">
<td class="row-column">Document name </td>
<td class="row-column">Author </td>
<td class="row-column">Last Modified On </td>
<td class="row-column">Doc type </td></tr>
</table>
<div id="templates"style="display: none">
<table>
<tr class="row-template">
<td aligh="center"class="DocumentName" style="width: 100px;">
</td><td class="Author"style="width: 100px;"></td>
<td class="LastModifiedOn" style="width: 100px;"></td>
<td class="Doctype" style="width: 100px;"></td>
</tr>
</table>;
</div>
5. under the div with id “templates” will be used to clone the rows. • Values for
each column will be set dynamically by navigating through the document library XML
received in JQuery. Once the values are set, they will be appended to the table
with id “documentListtable”
6. Following code is used to fetch the list of documents and its associated attributes
by querying the “Shared Documents” library.
• Operation: Which method to be executed in the List web service. Here “GetListItems” is used to get the items from list
mentioned in “ListName” parameter.
• async: Should the method be called asynchronously
or synchronously
• listName: List name. In this case it is “Shared documents”.
• Completefunc: Which method should be called on call back?
• CAMLRowLimit: no of rows that should be fetched.
$(document).ready(function () { $().SPServices({ operation:"GetListItems",
async: false,
CAMLRowLimit: 5,
listName: "Shared Documents",
completefunc: fnCallBack
}); });
7. Following section will explain on how the call back function will navigate through
the xml and add rows to the “documentListtable” table. Below code is self-explanatory
with inline comments.
function fnCallBack(xData, Status) {
var index = 0;
$documentListtable = $("#documentListtable");
$(xData.responseXML).find("z\\:row, row").each(function () {
var _url = $(this).attr("ows_FileRef").split(";#")[1];
var _name = $(this).attr("ows_LinkFilename");
var _pdfLink = $("<a href="http:
var _author = $(this).attr("ows_Editor").split(";#")[1];
var modifiedOn = $(this).attr("ows_Modified");
var _DocIcon = $(this).attr("ows_DocIcon");
var $row = $("#templates").find(".row-template").clone();
$row.find(".DocumentName").html(_pdfLink);
$row.find(".Author").html(_author);
$row.find(".LastModifiedOn").html(modifiedOn);
$row.find(".Doctype").html(_DocIcon);
if (index % 2 == 0) {
$row.addClass("jtable-row-even")
}
index = index + 1;
$documentListtable.append($row);
});
}
8. How is it rendered?
9. It is going to fetch only 5 rows as CAMLRowLimit is set to 5.
10. Style added in the “QuerySharedDocuments.txt” for providing alternate color to the table rows.
<style>
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
.row-template
{
background: rgb(248, 248, 248);
padding: 2px;
height: 30px;
}
.row-column
{
width: 150px;
align: left;
font-weight: bold;
}
.jtable-row-even
{
background: rgb(240, 240, 240);
}
</style>
Sample Code
Code
References
http://jquery.com/
http://spservices.codeplex.com/
http://www.codeproject.com/Articles/429474/Load-while-scrolling
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
