Working with SharePoint Web Services + JQuery to Add, Update and Delete items in SharePoint list

In this blog post I will entirely focus on Getting List items, Updating List items and Deleting List items using SharePoint Web Services. The code uses Jquery to Retrieve items and makes an ajax call to SharePoint Web Services.

Some of the Important examples that I will discuss in this series of blog posts are

How to Retrieve Items using Getlistitems with CAML query

How to Add\Delete\Update a single item using UpdatelistItems Web Service

How  to batch update items using UpdatelistItems Web Service based on a CAML query

How to batch Delete using UpdatelistItems Web Service based on a CAML query

Firstly,  Lets look at  how to Retrieve Items using Getlistitems with CAML query (with QueryOptions). We will use Announcements list as an example.

How to Retrieve Items using Getlistitems with CAML query -  The below code retrieves all the Announcements from the Announcement list where   Title = “Test Announcement” . You can paste the below code in a Content Editor WebPart for Testing Purposes. You would click on “Get Announcements” link in your CEWP to display resulting Announcements on the page.

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

function GetAnnouncements(){

var soapEnv = "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
<soap:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Announcements</listName> \
<query><Query><Where><Eq><FieldRef Name='Title'/><Value Type='Text'>Test Announcement</Value></Eq></Where></Query></query> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Body' /> \
<FieldRef Name='Expires' /> \
</ViewFields> \
</viewFields> \
<rowLimit>99999</rowLimit> \
<queryOptions xmlns:SOAPSDK9='http://schemas.microsoft.com/sharepoint/soap/' ><QueryOptions/> \
</queryOptions> \
</GetListItems> \
</soap:Body> \
</soap:Envelope>";
jQuery.ajax({
url: "/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: ProcessListItems,
contentType: "text/xml; charset=\"utf-8\""
});
}

function ProcessListItems(xData, status) {

jQuery(xData.responseXML).find("z\\:row").each(function () {
alert($(this).attr("ows_Title"));
$("<li>" + $(this).attr("ows_Title") + "</li>").appendTo("#Announcements");

});

}
</script>

<a href="#" onclick="Javascript:GetAnnouncements();">Get Announcements</a>

<ul id="Announcements"></ul>

Next lets look at how to use UpdatelistItems  Web service toAdd\Delete\Update a single item using UpdatelistItems Web Service and perform bulk updates.