CRUD On List Items Using Web Services and jQuery In SharePoint 2013

Now, I will demo all the operations on list items including retrieve, create, update and delete onlist items.

Retrieve the list items:

1. function retriveListItem()  
2. {  
3.     var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \  
4. <soapenv:Body> \  
5. <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \  
6. <listName>companyInfo</listName> \  
7. <viewFields> \  
8. <ViewFields> \  
9. <FieldRef Name='Company' /> \  
10. <FieldRef Name='Industry' /> \  
11. </ViewFields> \  
12. </viewFields> \  
13. </GetListItems> \  
14. </soapenv:Body> \  
15. </soapenv:Envelope>";  
16.     $.ajax(  
17.     {  
18.         url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",  
19.         type: "POST",  
20.         dataType: "xml",  
21.         data: soapEnv,  
22.         complete: processResult,  
23.         contentType: "text/xml; charset=\"utf-8\""  
24.     });  
25. }  
26.   
27. function processResult(xData, status)  
28. {  
29.     var MainResult = "";  
30.     $(xData.responseXML).find("z\\:row").each(function()  
31.     {  
32.         var companyName = $(this).attr("ows_Company");  
33.         var Industry = $(this).attr("ows_Industry");  
34.         MainResult += MainResult + companyName + "-" + Industry + "\n";  
35.     });  
36.     $('#ResultDiv').text(MainResult);  
37. }  

Create list item:

Here is the main code in detail:

1. function createListItem() {  
2.     var batch =  
3.         "<Batch OnError=\"Continue\"> \  
4.     <Method ID=\"1\" Cmd=\"New\"> \  
5.         <Field Name=\"Company\">" + $("#Company").val() + "</Field> \  
6.          <Field Name=\"Industry\">" + $("#Industry").val() + "</Field> \  
7.               </Method> \  
8. ch>";  
9.   
10.     var soapEnv =  
11.         "<?xml version=\"1.0\" encoding=\"utf-8\"?> \  
12. <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \  
13.     xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \  
14.     xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \  
15.   <soap:Body> \  
16.     <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \  
17.       <listName>companyInfo</listName> \  
18.       <updates> \  
19.         " + batch + "</updates> \  
20.     </UpdateListItems> \  
21.   </soap:Body> \  
22. </soap:Envelope>";  
23.   
24.     $.ajax({  
25.         url: _spPageContextInfo.webAbsoluteUrl+ "/apps/_vti_bin/Lists.asmx",  
26.         beforeSend: function(xhr) {  
27.             xhr.setRequestHeader("SOAPAction",  
28.             "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
29.         },  
30.         type: "POST",  
31.         dataType: "xml",  
32.         data: soapEnv,  
33.         complete: processResult,  
34.         contentType: "text/xml; charset=utf-8"  
35.     });  
36. }  
37.   
38. function processResult(xData, status) {  
39.     retriveListItem();  
40. }  

Update list item:

Here is the main code in detail:

1. function updateListItem() {  
2.       
3.     var UpdateNewItemXml =  
4.         "<Batch OnError=\"Continue\"> \  
5.     <Method ID=\"1\" Cmd=\"Update\"> \  
6.         <Field Name=\"ID\">7</Field>\  
7.          <Field Name=\"Industry\">" + $("#Industry").val() + "</Field> \  
8.               </Method> \</Batch>";  
9.    var soapEnv =  
10.         "<?xml version=\"1.0\" encoding=\"utf-8\"?> \  
11. <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \  
12.     xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \  
13.     xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \  
14.   <soap:Body> \  
15.     <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \  
16.       <listName>companyInfo</listName> \  
17.       <updates> \  
18.         " + UpdateNewItemXml + "</updates> \  
19.     </UpdateListItems> \  
20.   </soap:Body> \  
21. </soap:Envelope>";  
22.   
23.     $.ajax({  
24.         url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",  
25.         beforeSend: function (xhr) {  
26.             xhr.setRequestHeader("SOAPAction",  
27.             "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
28.         },  
29.         type: "POST",  
30.         dataType: "xml",  
31.         data: soapEnv,  
32.         complete: processResult,  
33.         contentType: "text/xml; charset=utf-8"  
34.     });  
35. }  
36. function processResult(xData, status) {  
37.     retriveListItem();  

}

Delete list item:

here is the main code in detail:

1. function deleteListItem()  
2. {  
3.     var DeleteItemXml = "<Batch OnError=\"Continue\"> \  
4.             <Method ID=\"1\" Cmd=\"Delete\"> \  
5.                 <Field Name=\"ID\">7</Field>\  
6.                 <Field Name=\"Company\">" + $("#Company").val() + "</Field> \  
7.                       </Method> \</Batch>";  
8.     var soapEnv = "<?xml version=\"1.0\" encoding=\"utf-8\"?> \  
9.         <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \  
10.             xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \  
11.             xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \  
12.           <soap:Body> \  
13.             <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \  
14.               <listName>companyInfo</listName> \  
15.               <updates> \  
16.                 " + DeleteItemXml + "</updates> \  
17.             </UpdateListItems> \  
18.           </soap:Body> \  
19.         </soap:Envelope>";  
20.     $.ajax(  
21.     {  
22.         url: _spPageContextInfo.webAbsoluteUrl + "/apps/_vti_bin/Lists.asmx",  
23.         beforeSend: function(xhr)  
24.         {  
25.             xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");  
26.         },  
27.         type: "POST",  
28.         dataType: "xml",  
29.         data: soapEnv,  
30.         complete: processResult,  
31.         contentType: "text/xml; charset=utf-8"  
32.     });  
33. }  
34.   
35. function processResult(xData, status)  
36. {  
37.     retriveListItem();  

}