SP Services will not work from master page or aspx CEWP, HTML pages ok

Feb 14, 2011 at 11:02 PM
Edited Feb 14, 2011 at 11:03 PM

I have a very odd situation where the below SP services call does not work on a master page, however it works on standard html pages. Is this a known issue with SP Services? Also posted below is the older Jan Tielens method for SP webservices with Jquery, which does work. The jan Tielens method is hard coded in the master page and the affected divs are contained in the default.aspx web parts content. But the SP Services will not work in the web parts. SP Services also doesnt work even if I hard code the divs into the master page rather than in the default.aspx's cewp.  The  xData.responseText does not appear for the SP Services.

SP Services Method: works in html pages, does not work in master page

$(document).ready(function() {
        $().SPServices({
   operation: "GetListItems",
   // Force sync so that we have the right values for the child column onchange trigger
   async: false,
   webURL: "http://xxx/sites/web/",
   listName: "News",
   // Filter based on the currently selected parent column's value
   CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Summary' /></ViewFields>",
   CAMLQuery: "<Query><OrderBy><FieldRef Name='Modified' Ascending='FALSE' /></OrderBy><Where><Eq><FieldRef Name='_ModerationStatus' /><Value Type='ModStat'>Approved</Value></Eq></Where></Query>",
   CAMLRowLimit: "4",
   completefunc: function (xData, status) {
    $(xData.responseXML).find("[nodeName=z:row]").each(function() {
     var Html = "<strong><a href=xxx/sites/web/Lists/News/DispForm.aspx?ID=" + $(this).attr("ows_ID") + ">" + $(this).attr("ows_Title") + "</a></strong><br>" + $(this).attr("ows_Summary") + "<br /><br />";
     $("#mytab1").append(Html);
     alert(xData.responseText);

    });
   }
   });
  //End SPServices Call
  //Start BNB Call
  $().SPServices({
   operation: "GetListItems",
   // Force sync so that we have the right values for the child column onchange trigger
   async: false,
   webURL: "xxx/sites/web/",
   listName: "News",
   // Filter based on the currently selected parent column's value
   CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Summary' /></ViewFields>",
   CAMLQuery: "<Query><OrderBy><FieldRef Name='Modified' Ascending='FALSE' /></OrderBy><Where><And><Eq><FieldRef Name='_ModerationStatus' /><Value Type='ModStat'>Approved</Value></Eq><Eq><FieldRef Name='BREAKING_x0020_NEWS_x0020_BANNER' /><Value Type='Text'>Yes</Value></Eq></And></Where></Query>",
   CAMLRowLimit: "3",
   completefunc: function (xData, status) {
    $(xData.responseXML).find("[nodeName=z:row]").each(function() {
     var Html = "<strong style='margin-right:65px'><a href=xxx/sites/web/Lists/News/DispForm.aspx?ID=" + $(this).attr("ows_ID") + "'>" + $(this).attr("ows_Title") + "</a></strong>";
     $("#BNB2").append(Html);
     alert(xData.responseText);

    });
   }
   });
  //End SPServices Call
   });
  //End Document Ready Function

  //This is in the default aspx CEWP

 <div class="AJAX" id="BNB2">
</div>
<div class="AJAX" id="mytab1" style="float:right; border:1px solid blue; clear:left;">
</div>

Then here is the Jan Tielens older method, which does work in HTML, master and default CEWP. But I like SP Services much better for obvious reasons.

 $(document).ready(function() {
        //This is a CAML query which calls the SharePoints list contents for tab1
  var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Home-Page</listName> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
  
        $.ajax({
            url: "http://xxx/sites/web/_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv, //Can also place soapEnv2 no errors desired is [soapEnv, soapEnv2]
            complete: processResult, //desired is [processResult, processResult2]
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
            var Html = "<strong><a href=xxx/sites/web/Lists/News/DispForm.aspx?ID=" + $(this).attr("ows_SourceID2") + ">" + $(this).attr("ows_Title") + "</a></strong><br>" + $(this).attr("ows_Summary") + "<br /><br />";
            $("#mytab1").append(Html);
        });
    }

  //OLD BNB append
  $(document).ready(function() {
 var soapEnv3 =  "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>BNB</listName> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
   $.ajax({
            url: "xxx/sites/web/_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv3, //Can also place soapEnv2 no errors desired is [soapEnv, soapEnv2]
            complete: processResult3, //desired is [processResult, processResult2]
            contentType: "text/xml; charset=\"utf-8\""
        });
    });
 /* Causes an error when used or placced with the other
 Need to run both of these soapEnv and process result, this will populate far right tab. */
 function processResult3(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
            var Html = "<strong style='margin-right:65px'><a href=xxx/sites/web/Lists/News/DispForm.aspx?ID=" + $(this).attr("ows_SourceID") + "'>" + $(this).attr("ows_Title") + "</a></strong>";
            $("#BNB2").append(Html);
   //alert(Html);
        });
  }
  //This is in the default aspx CEWP, or maybe hard coded into the master and works there

<div class="AJAX" id="BNB2">
</div>
<div class="AJAX" id="mytab1" style="float:right; border:1px solid blue; clear:left;">
</div>

------------------------

So has anyone encountered this before when working with a master page? Did I miss something obvious? I cant believe that this newer method will not work but the older one will, it doesnt seem right to me. I can post the entire contents of the master page if it is needed.

Coordinator
Feb 14, 2011 at 11:09 PM
Edited Feb 14, 2011 at 11:09 PM

Are you by any chance using jQuery 1.5, which was recently released? If so, you have to have single quotes around the z:row:

$(xData.responseXML).find("[nodeName='z:row']").each(function() {

This was actually "required" in previous versions of jQuery, but not enforced.

Jan's notation:

$(xData.responseXML).find("z\\:row").each(function() {

will work in IE, but not other browsers. See my blog post.

M.

Feb 15, 2011 at 2:59 PM

Hi Marc, I am actually just running a local instance of jquery-1.3.2.js. I added the quotes just in case - it didnt make a difference.

I thought also maybe it was just the master page which would not support the script but when I hard code it into the default.aspx it fails there too. I thought since the divs that it populates are within a CEWP and therefore within CDATA that could be a problem. That is not it either, I hard coded the divs into the default.aspx and that still did not work.

My masterpage here is customized. I am going to duplicate this on an uncustomized master page and report back the results.

Coordinator
Feb 15, 2011 at 3:05 PM
Edited Feb 15, 2011 at 3:05 PM

jQuery 1.3.2 is ancient; at the very least, I'd suggest upgrading. The other thing I'd check is that the src reference is right. Remember that the master page is used in the context of the current page. So if you have a reference like:

../../Scripts/jQuery-1.3.2.js

which works in one place, it won't probably work in another. Instead:

/Scripts/jQuery-1.3.2.js

M.

Feb 15, 2011 at 5:16 PM
Edited Feb 15, 2011 at 5:25 PM

First I did update to jquery-1.4.4, I Can't tell that it made a difference but I did get your SP Services now working on a standard master page (i think caching was making it not appear before). I call all my scripts on an absolute path because I run this on another domain.

<script type="text/javascript" src="http://aaa.com/sites/web/js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://aaa.com/sites/web/js/jquery.SPServices-0.5.7.js"></script>
<script type="text/javascript" src="http://aaa.com/sites/web/js/news-tabs.js"></script>//the SP Services

Unfortunately this still doesnt work on my customized master page so there must be a conflict with another javascript or jquery line in there. Thanks for helping to isolate the problem to the customization of the master page file.

 

Edit: Its not the customization of the master file which is causing the issue, its javascript which is placed on a CEWP on the default page.
 

Coordinator
Feb 15, 2011 at 6:23 PM

It's certainly possible to have conflicts between scripts. Any idea what the conflict is? Might you be referencing jQuery more than once?

M.

Feb 15, 2011 at 8:34 PM

Spot on Marc,

An older CEWP had this line in it: <script type="text/javascript" src="/sites/web/js/jquery.js"></script>

Once that was removed both of the scripts ran as intended.

Coordinator
Feb 15, 2011 at 9:01 PM
Excellent!

Check out the SPScriptAudit function in SPServices. It can help track stuff like this down.

M.
>