Accessing List Items using jQuery and SharePoint Web Services


Table of Contents


Add to Technorati Favorites



Recently Updated

Source: Jan Tielens

The code below can be used to access list items in a SharePoint list leveraging jQuery and SharePoint Web Services.

<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"/>

Labels

webservices webservices Delete
splistitem splistitem Delete
splist splist Delete
jquery jquery Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (4)

 

  1. Aug 24, 2009

    Walter Parrish says:

    OK... I see the reference to _vti_bin/lists.asmx but I would have expected a...

    OK... I see the reference to _vti_bin/lists.asmx but I would have expected a reference to an operation such as GetListItems to actually access the title.

    When I paste the code above into a Content Editor web part nothing happens...

    Am I totally "off base"?

    1. Aug 24, 2009

      Anonymous says:

      Hi Walter, I did also try this code and nothing happened. Then after some check...

      Hi Walter,

      I did also try this code and nothing happened. Then after some checkups I found what worked for my case. The problem was with the reference to the _vti_bin/lists.asmx beeing relatively and the page beeing in Pages-library (which is what should be). For some kind of reason, when clicking on "Service Description" on following url, it' returns "XML Parsing Error: no element found (FF says so, IE doesn't even render the page).

      http://localhost/Pages/_vti_bin/lists.asmx?WSDL

      But when I modify URL with following, everything works correctly, and then my JQuery do populate ul.

      The new url is following:

      http://localhost/_vti_bin/lists.asmx?WSDL

      Could this be a bug in SharePoint!? Maybe, I don't know. 

  2. Sep 23, 2009

    Anonymous says:

    Very useful, I'm using since some times now with great results. One question tho...

    Very useful, I'm using since some times now with great results. One question though: is it possible when querying a list to get the url of the file attached to the list item? As far as I saw the query just returns the following elements regarding an attachment:

    ows_Attachments='1'
    ows_FileRef='[item ID];#[siteName]/Lists/[listName]/[item ID]_.000'

    if someone already had the problem I would be glad to have any information about it!

  3. Sep 24, 2009

    Marc D Anderson says:

    There are multiple Web Services available, and you can combine calls to them to ...

    There are multiple Web Services available, and you can combine calls to them to do more useful stuff.  Check out our [relatively] new jQuery Library for SharePoint Web Services.  This jQuery plugin "wraps" the SharePoint Web Services so that you can call them as easily as (for the above example):

    $().SPServices({
  operation: "GetListItems",
  listName: "Tasks",
  CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
  completefunc: function (xData, Status) {
    $(xData.responseXML).find("z:row").each(function() {
      var liHtml = "" + $(this).attr("ows_Title") +"";
      $("#tasksUL").append(liHtml);
    });
  }
});

     M.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Hosted generously by CustomWare