jquery example to query a share point list

8/3/2019 JQuery Example to Query a Share Point List

1/3

JQuery example to query a SharePoint list (I am consuming Announcement List)

I will tell you at end how to do automatically loading data as soon as page is loaded. First take a look at

the steps and follow as is.

I am going to use JQuery so, you have to download latest JQuery file. I am attaching the same with this

mail, which you can copy and paste to the required location and change it appropriately. I will tell you

where it comes.

y Create a sample web-part.y Initially I am going to add some script and html controls to web part page like below.

Test

You have to copy the JQuery to the folder Srini which I have created for myself in layouts.

y Now you have to query the lists.asmx web service available from SharePoint. You have to playaround this and get required data you are looking. I am querying 3 fields from Announcement

list. Add the code below to the above code.

var soapPacket =

Announcements

;

The above code is passed to list.samx web services to get the required data from the list. I will

show you below in Ajax method passing soapPacket variable declared above as parameter.


2/3

y Now call the Ajax method of the JQuery to get the announcement list as below.jQuery.ajax({

url: "http://durgabala/_vti_bin/lists.asmx",type: "POST",dataType: "xml",

data: soapPacket,complete: processResult,

contentType: "text/xml; charset=\"utf-8\""});

durgabala is my machine name, you have to change this to the testing system in

our environment.

y Declare the processResult method declare in the above Ajax query statement at complete:function processResult(xData, status) {

alert(xData.responseText);

}

You can run the program here and see the output of the web-part by

adding to a page.

When you click on link Test you will see the output of SOAP xml in

alert.

y Now we are going to change the method to display only one column asbelow, comment the above alert line and add the below line.

jQuery(xData.responseXML).find("z\\:row").each(function() {

alert($(this).attr("ows_Title"));

});

y Run the program and see all the items added to announcement list are displayed one by one.y Now I am going to change the program to display all items to the html element declare very

first as below. Comment the above alert line and add the below line.

$("" + $(this).attr("ows_Title") +

"").appendTo("#AnnouncementData");

y Now when you run the program and click on Test link you will see allitems added automatically to the element.

y Now at this movement we are done with the Ajax loading from SharePoint,but we have to display the data automatically to the rather than

clicking on Test link. For this add the below code to the javascript

tags to load automatically.


3/3

$(document).ready(function () {GetAnnouncementData();

});

y Run the program and test the data. Get back to me if nothing happens.Bingo! you are done with Ajax loading data using JQuery to get all list items in Announcement list.

jquery example to query a share point list

Documents