Tag Archives: web services

Read List Items using Sharepoint Web Services and jQuery

These days you can find the samples of this code almost in every corner of the WWW. Here is my contribution. I am also adding new JavaScript function called asmx(). What is does? It gets the URL of the current Site Collection, so you don’t have to write it every time you move your code to different site or server. Just be sure it is in the root folder of your Site Collection or modify the code accordingly.

First do not forget to include the jQuery library!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var listName = "myList";

$(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>"
+listName+"</listName> \
                    <viewFields> \
                        <ViewFields> \
                           <FieldRef Name='Title' /> \
                       </ViewFields> \
                    </viewFields> \
                </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>"
;
   
    $.ajax({
        url: asmx(),
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\""
    });
});

function asmx() {

    var url = window.location.href;
    var urlin = url.substring(7);
    var urlsplit = urlin.split("/");
    var dolzina = urlsplit.length - 1;
    var naslov = new Array();
    for(i = 0; i < dolzina; i++){
        var naslov = naslov + urlsplit[i] + "/";
    }
    var asmx =  "http://" + naslov + "_vti_bin/lists.asmx";
    return asmx;

}

function processResult(xData, status) {
    $(xData.responseXML).find("z\\:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") + " - " + $(this).attr("ows_Total") + "</li>";
        $("#data").append(liHtml);
    });
}

Also create some HTML markup where to insert the results:

1
<ul id="data"></ul>