How Retrieve Sharepoint List data using Jquery

Question

I am trying to retrieve list data using Jquery. But I am getting the whole list Html page not the values from the List. Jquery Code is as follows

<script src="../_layouts/15/SharePointProject1/Scripts/jquery-1.3.2.js"></script>
<script language = "javascript" type="text/javascript">
    function GetAnnouncementData() {
        var soapPacket = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
   <soapenv:Body> \
    <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
     <listName>Temp</listName> \
     <viewFields> \
      <ViewFields> \
        <FieldRef Name='Title' /> \
      </ViewFields> \
     </viewFields> \
    </GetListItems> \
   </soapenv:Body> \
  </soapenv:Envelope>";
        jQuery.ajax({
            url: "http://serverName/Lists/Temp/listsView.aspx",
            type: "POST",
            dataType: "xml",
            data: soapPacket,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    }

    function processResult(xData, status) {
        //jQuery(xData.responseXML).find("z\\:row").each(function () {
        //    $("<li>" + $(this).attr("ows_Title") + "</li>").appendTo("#AnnouncementData");
        //});
        //alert($(this).attr("ows_Title"));
        alert(xData.responseText);
        //alert(status.toString());
        document.getElementById("tarea").value = xData.responseText;
        document.getElementById("div1").innerHTML = xData.responseText;
    }
    $(document).ready(function () {
        GetAnnouncementData();
    });
</script>

This code is giving me The list page not list data. I tried to get xml file in div tag so that I can view what it is returning me. It returns me the HTML page of that list.
Please Help.

You may want to consider using a framework for this, camelotjson.codeplex.com — Eric Herlitz
– Eric Herlitz, Commented Feb 16, 2013 at 10:07
Actually I am facing main problem in URL url: "http://serverName/Lists/Temp/listsView.aspx". I think web service fetches data by URL something like _vti_bin\lists.asmx but in that I got 404 error. — Rahul Gokani
– Rahul Gokani, Commented Feb 16, 2013 at 10:15
So, how does the handler in the listsView.aspx look that receive your post? — Eric Herlitz
– Eric Herlitz, Commented Feb 16, 2013 at 10:17
It returns me the whole HTML page(HTML Code) of the ListView page. It contains all the links but the Data it do not display. — Rahul Gokani
– Rahul Gokani, Commented Feb 16, 2013 at 10:21
I'd call this a strange approach of retrieving data form SharePoint — Eric Herlitz
– Eric Herlitz, Commented Feb 16, 2013 at 10:58

doitlikejustin · Accepted Answer · 2013-03-24 04:34:19Z

11

For me the best option is using REST calls receiving the data as json, is much more cleaner and easier to use.

Also, the good thing is that REST calls on SharePoint are made using Linq, so in this way is more flexible when you create the query, like for example you can do a better pagination, instead of using the crappy paginations of sharepoint that only allow you to do a next items.

var ajaxCall = $.getJSON("http://SharePointSiteUrl/_vti_bin/listdata.svc/ListName");

ajaxCall.success(function (jsonData) { callbackSuccessFunction(jsonData.d.results); });
ajaxCall.error(function () { callbackErrorFunction({ status: 'error', data: 'error message.' }); });

The returned data will be received as json in the following format:

{d: {results: [arrays of items]}

In case you need to know the name of the list to do the rest call, just call the url:

http://SharePointSiteUrl/_vti_bin/listdata.svc/

Here is some info: http://msdn.microsoft.com/en-us/library/ff798339.aspx

I hope it helps.

edited Mar 24, 2013 at 4:34

doitlikejustin

6,3312 gold badges44 silver badges69 bronze badges

answered Mar 24, 2013 at 4:06

jfplataroti

6614 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben_Coding Over a year ago

Thanks that was useful to see the JSON method for hitting Sharepoint!

Mital · Accepted Answer · 2013-03-30 07:24:50Z

4

Did you check your URL that you have given to access the list.

url: "http://serverName/Lists/Temp/listsView.aspx",

In this URL if you are accessing the local machine then you have to give localhost in server name.

url: "http://localhost:80/Lists/Temp/listsView.aspx",

Try using this and let me know if it works or not.

answered Mar 30, 2013 at 7:24

Mital

2031 silver badge6 bronze badges

Comments

Yogi · Accepted Answer · 2013-03-23 22:49:37Z

An old question, but to help others looking for an answer ...

The simplest way to "retrieve list data using jQuery" is to use the SharePoint URL protocol. It can return list data in XML and doesn't require you to build SOAP requests. All you need is the list GUID and the ows_ attribute names (use FireBug to inspect the returned XML).

The simple example below will display announcement data. Paste the code into an empty HTML page on your SharePoint site and replace the siteUrl and listId values with your own.

Microsoft Reference: URL Protocol

If you need to do more than just read list data then have a look at jQuery.SPServices by Marc D Anderson.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">

/* Tested with WSS3,IE9,FF19 */

$(document).ready( function() {

    var siteUrl = "//london",
        listId  = "{1EC2EC89-B3DC-434D-A63E-AAEBF72E4E89}";

$.get( siteUrl + "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List=" + listId, 
    function( xml ) {
        var zrow = xml.getElementsByTagName("z:row");
        for(var i=0; i<zrow.length; i++) {
            $("#table1 tbody").append( 
            "<tr><td>"
            + zrow[i].getAttribute("ows_Attachments")
            + "</td><td>"
            + zrow[i].getAttribute("ows_LinkTitle") 
            + "</td><td>" 
            + zrow[i].getAttribute("ows_Body") 
            + "</td></tr>" 
            );
        }
});
});

</script>

<table id="table1">
<caption>Announcements</caption>
<tbody></tbody>
</table>

</body>
</html>

Collectives™ on Stack Overflow

How Retrieve Sharepoint List data using Jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related