Querying SharePoint List Items using jQuery
Due to popular demand I’ve created another sample of how you can make use of the jQuery Javascript library in your SharePoint sites. This example uses SharePoint’s Lists.asmx web service to retrieve all the list items of a specific list. In my previous posts I showed how you could use jQuery in SharePoint Site Pages (regular .aspx pages uploaded to a Document Library), so let’s do something different now; let’s use jQuery in a plain Content Editor Web Part.
To try this sample navigate to the home page (usually /default.aspx) of a SharePoint site that has a list with some list items in it, in my code I’ll use the Task list of a plain vanilla Team Site. Switch the page to Edit mode (Site Actions, Edit Page), and add a new instance of the Content Editor Web Part to the page. In the properties of that web part, copy and paste the following code using the Source Editor button.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Tasks</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});
function processResult(xData, status) {
$(xData.responseXML).find("z\\:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
</script>
<ul id="tasksUL"/>
On the first line the jQuery library is loaded from googlecode.com. To make this your, your client browser needs to have Internet access of course. Alternativly you can host the jQuery library yourself (see my previous examples) or even load the jQuery library in every page using the SmartTools.jQuery component. After that a function is attached to the jQuery document ready event. In this function the SOAP envelope message is constructed (the soapEnv variable). If you’d like to see the code getting list items from another list than the Task list, you’d have to change the listName element. The second part POST-ing the SOAP envelope to the web service by using jQuery’s ajax function. When the web service comes back with the result, the processResult method is called. In this function a loop is created over every row element (in the namespace z). Notice that "z:row" escapes in Javascript to "z\\:row". For every row element a new li HTML element is added to the ul element with ID tasksUL. And that’s it! You can see the result in the screenshot below.
