Wednesday, May 6, 2009 7:35 PM Jan Tielens

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.

Filed under:

Comments

# re: Querying SharePoint List Items using jQuery

Wednesday, May 6, 2009 2:31 PM by Jaap Vossers

As the response from the web service is in xml format, you might want to look into some jquery xslt plugins to transform the result set into goodlooking html.

# re: Querying SharePoint List Items using jQuery

Wednesday, May 6, 2009 7:56 PM by ausideveloper

Good effort, thanks for sharing.

# re: Querying SharePoint List Items using jQuery

Thursday, May 7, 2009 10:19 AM by Jay

Outstanding!

Any thoughts on why this script only works in a CEWP on my home page?  Is there a different way I should refer to listName when using this kind of script in a CEWP elsewhere within my site?

# re: Querying SharePoint List Items using jQuery

Thursday, May 7, 2009 11:23 AM by ONerd

Jay,

Make sure the list is on the same site (not a site below the site where your home page is).  

# re: Querying SharePoint List Items using jQuery

Monday, May 11, 2009 8:40 AM by Peter

Hi,

I've tried excactly what you've done. Even used the smartools solution. Nothing is showing up. Do I need to do something to activate the ajax function or is that included in de jquery scripting?

# re: Querying SharePoint List Items using jQuery

Monday, May 18, 2009 4:35 AM by Jonathan

Hi Jan,

All these Web Services calls with jQuery are really cool. Yet I stumbled upon a problem the other day. I tried calling the Lists Web Service of a farm A from a farm B.

Firefox refuse to make the call saying it was a security violation (cross-site call are denied) and IE 6 displays a Warning popup indicating the same kind of problem.

After searching a little while, I came to the conclusion that the only way to go was to make the call server side or to use a JSON API that SharePoint deosn't expose to my knowledge.

Have you ever tried such a thing ?

# re: Querying SharePoint List Items using jQuery

Wednesday, June 10, 2009 7:33 AM by Sireesh

Hi

I tried to access list in javascript using webservice but thing is that iam getting permission denied error when tryint to xmlHttp.open state.

I guess this is throwing when accessing the url _vti_bin/lists.asmx. How can I make this work.

Thanks in advance

# re: Querying SharePoint List Items using jQuery

Wednesday, July 1, 2009 11:43 AM by Mike H.

This will not work with Chrome or Safari browsers.   It appears they have a problem finding the z:row nodes because they have issues with the namespace.

I am looking for a way to make this work in IE, Firefox, Chrome and Safari.    So far no luck making all 4 browsers work using jQuery ajax method.

# re: Querying SharePoint List Items using jQuery

Thursday, July 16, 2009 7:54 AM by Nezih OZTURK

hi

i doesnt work for   '<listName>User Information List</listName>' ?

# re: Querying SharePoint List Items using jQuery

Friday, July 17, 2009 3:01 AM by santhmon

Hi Jan,

Thanks for your excellent post.i need a one help.in my site i need to display a two different list in two different CEWP.how can i do.

i have try to display Two list in two CEWP but it's display in single CEWP.

Please Help Me.

# re: Querying SharePoint List Items using jQuery

Friday, July 17, 2009 3:01 AM by santhmon

Hi Jan,

Thanks for your excellent post.i need a one help.in my site i need to display a two different list in two different CEWP.how can i do.

i have try to display Two list in two CEWP but it's display in single CEWP.

Please Help Me.

# re: Querying SharePoint List Items using jQuery

Friday, July 17, 2009 4:55 AM by santhmon

Dear Jan,

i got a solution....

i have rename the function name..the problem resolved...

thanks

# re: Querying SharePoint List Items using jQuery

Sunday, July 19, 2009 10:48 PM by santhmon

Hi jan,

the jquery-1.3.2.min.js file is required any license?

# re: Querying SharePoint List Items using jQuery

Wednesday, July 22, 2009 7:22 AM by Michiel

Thanks for these instructions, works perfectly. Because I want these items to link to the detailpage, I changed part of the code to make a url to the page for each listed item:

var liHtml = "<li><a href=Lists/YourList/DispForm.aspx?ID=" + $(this).attr("ows_ID") + ">" + $(this).attr("ows_Yourcolumn") + "</a></li>";

Cheers,

Michiel

# re: Querying SharePoint List Items using jQuery

Friday, July 24, 2009 3:46 AM by Chetali

Thanks or this post..really helpful

The list items can be targeted to particular audiences also.

Using Jquery and web services, can we retrieve data on the basis of target audiencing?

# re: Querying SharePoint List Items using jQuery

Friday, July 24, 2009 3:54 AM by Chetali

Is this recursive?? will it parse the lists across all the sites/sub sites?