SharePoint 2010 web service - GetListItems not working in Chrome & firefox

Question

    function GetListItems() {

        var soapEnv = "<?xml version='1.0' encoding='utf-8'?><soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>" +
             "<soap:Body> " +
             "<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> " +
              "<listName>SomeList</listName> " +
               "<query><Query><Where><Gt><FieldRef Name='ID' /><Value Type='Counter'>1</Value></Gt></Where></Query></query> " +
              " <viewFields> <ViewFields> <FieldRef Name='SomeContent' /></ViewFields></viewFields> " +
              "<rowLimit>100</rowLimit>" +
             "<queryOptions xmlns:SOAPSDK9='http://schemas.microsoft.com/sharepoint/soap/' ><QueryOptions/> " +
            "</queryOptions> </GetListItems></soap:Body> </soap:Envelope>";


        jQuery.ajax({
            url: "http://sharepointsiteurl/_vti_bin/lists.asmx",

            type: "POST",
            dataType: "xml",
            data: soapEnv,
            error: ErrorFunc,
            complete:GetListItemsComplete,
            contentType: "text/xml; charset=\"utf-8\""
        });
    }
    function ErrorFunc(xData, status) {
        debugger;
        alert(xData.responseText);
    }
    function GetListItemsComplete(xData, status) {

        var a = xData.responseText;
        alert(a);
        $(xData.responseXML).find("z\\:row, row").each(function () {
            var title = $(this).attr("ows_SomeContent");
            $($(this).attr("ows_SomeContent")).appendTo("#Announcements");
        });

    }

</script>
<a href="#" onclick="Javascript:GetListItems();">Get List Items</a>
<div id="Announcements">
</div>

Any help will be appreciated...

Answer 1

There's a lot of advice given here, but your real problem is with parsing the XML that has been returned from you. The problem is with this call: $(xData.responseXML).find("z\\:row, row"). That is no longer supported AT ALL with jQuery 1.5+ in a cross browser way. You say you are using 1.4.2, but I strongly suggest you verify the version you are using by typing jQuery.fn.jquery in your console. This will tell you the version number that is loaded in the browser. Keep in mind there may be multiple versions over jQuery loaded...

For those that like to read up on the bugs...

http://bugs.jquery.com/ticket/8120

This 'bug' introduced a lot of confusion with existing code. Quite honestly because a lot of developers didn't take the time to read the documentation. To solve your problem, you'll have to parse your XML a different way. The preferred method is with this function:

$.fn.SPFilterNode = function(name) {
   return this.find('*').filter(function() {
       return this.nodeName === name;
  });
};

Just add this function to your existing script prior to your Web Service calls and use it like this:

$(xData.responseXML).SPFilterNode("z:row").each(function () {
   var title = $(this).attr("ows_SomeContent");
   $($(this).attr("ows_SomeContent")).appendTo("#Announcements");
});

[Note: part of the above content was copied/ taken from Steve Workman's blog - see link here]

And I'd be amiss if I didn't send you to the king of all king's for SharePoint Web Services:

http://sympmarc.com/2011/11/08/problem-with-jquery-1-7-and-spservices/

With all this said, you really ought to be using SPServices for all of your front-end activities. There are different API's available in 2010, but since you are asking about the Web Services specifically, this is the de facto standard library.

Answer 2

You can do Http Debugging issue Fiddler / Network Monitor tool.

http://www.cantoni.org/2010/08/19/fiddler-any-browser

http://fiddler2.com/fiddler/help/hookup.asp

You can compare the Fiddler / Network Monitor traces of IE & Firefox and Chrome & Firefox. This would give you a clear idea on how to fix this issue

Reference: http://social.msdn.microsoft.com/forums/en-US/sharepointdevelopmentprevious/thread/cfacbd54-f08c-4671-a6e7-a083965542e2

Answer 3

I use this with IE, FF, and Chrome. You need to add the headers object to your $.ajax() request:

$.ajax({
    url: "http://sharepointsiteurl/_vti_bin/lists.asmx",
    type: "POST",
    dataType: "xml",
    data: soapEnv,
    headers: {
        "SOAPAction": "http://schemas.microsoft.com/sharepoint/soap/GetListItems",
        "Content-Type": "text/xml; charset=utf-8"
    },
    success: function (xmlDoc, status, res) {
        var readyState = res.readyState; //4
        var responseXML = res.responseXML; //XML as Document
        var responseText = res.responseText; //XML as string
        var status = res.status; //200
        var statusText = res.statusText; //'OK'

        /* 
           A simple workaround with RegEx to replace z:row with zrow for browsers 
           that don't implement document.getElementsByTagNameNS('*', 'z:row') or
           won't read z:row with getElementsByTagName, namely IE.
           SPServices is great but you don't need it if you want a leaner app.
           without unnecessary dependencies that can break your page in later versions
           of either jQuery or SPServices.
        */
        var temp = document.createElement('div');
        temp.innerHTML = responseText.replace(/z:row/g, 'zrow');
        var rows = temp.getElementsByTagName('zrow');

        //process the rows...
    },
    error: function (xmlDoc, status, res) {
        //handle
    }
});