Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

SPSERVICES

I was playing familiarizing myself with SPSERVICES by following the example on the following blog..

http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?List=9174cc90%2Dd85c%2D4f0b%2Da884%2D4c4023ff9556&ID=5&Web=70322961%2D8cf0%2D46cf%2Db4c4%2Daccdc264bf8e

I did everything exactly how it was done on the blog but, it does not work for me.  I don't get any errors either.  I added a couple of alert()'s and those poped up but nothing else.

Any ideas?

Attached is my code.
eeGetSpeakers.js
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
you did not mention your SharePoint version but using SiteAsset library I assume SharePoint 2010.
Attached a modified version of your script.
I uploaded the complete script as TEXT file to the site asset library and added a content editor web part on a new page, configuring this text file as link source.
This one works on my machine ;-)

Main change:
1. Instead of document ready use the built in container / array _spBodyOnLoadFunctionNames (which will be executed internally on document ready function by function)
2. Instead of $ use jQuery to avoid conflicts
Reference:
http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

Important:
You would have to rename the list back - on my system the list is named EESpeakers.
And adjust the script src links.

HTH
Rainer
EE-SPService.txt
Avatar of Isaac

ASKER

I made the changes but it still does not work for me.  I don't get any errors either and my alerts go off.

Could it be because I'm in Office 365 SharePoint Online?
Avatar of Isaac

ASKER

I'm definiteley doing something wrong.  I added it to another server and same thing.
Avatar of Isaac

ASKER

Here's the code I'm using....

<script type="text/javascript" src="../SiteAssets/jquery.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices.min.js"></script>

<script type="text/javascript">
//this is where the script starts after the page is loaded
_spBodyOnLoadFunctionNames.push("GetSpeakers");

function GetSpeakers()
{
	alert("in getspeaker function");
        //The Web Service method we are calling, to read list items we use 'GetListItems'
        var method = "GetListItems";
        
        //The display name of the list we are reading data from
        var list = "Speakers";

        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='Blog' />" +
                                "<FieldRef Name='Picture' />" +
                            "</ViewFields>";
                            
        var query = "<Query>" +
                        "<Where>" +
                            "<Neq>" +
                                "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                            "</Neq>" +
                        "</Where>" +
                        "<OrderBy>" + 
                            "<FieldRef Name='Title'/>" +
                        "</OrderBy>" +
                    "</Query>";

        //Here is our SPServices Call where we pass in the variables that we set above
        jQuery().SPServices({
                operation: method,
                async: false,  //if you set this to true, you may get faster performance, but your order may not be accurate.
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                      //this basically means "do the following code when the call is complete"
                    completefunc: function (xData, Status) { 
                        //this code iterates through every row of data returned from the web service call
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                            //here is where we are reading the field values and putting them in JavaScript variables
                            //notice that when we read a field value there is an "ows_" in front of the internal field name.
                            //this is a SharePoint Web Service quirk that you need to keep in mind. 
                            //so to read a field it is ALWAYS $(this).attr("ows_<internal field name>");
                            
                            //get the title field (Speaker's Name)
                            var name = ($(this).attr("ows_Title"));
                            
                            //get the blog url, SharePoint stores a url in the form of <url><comma><description>
                            //We only want the <url>. To accomplish this we use the javascript "split" function
                            //which will turn <url><comma><description> into an array where the first element [0]
                            //is the url.   Catch all that? if you didn't this is another reason you should be
                            //a developer if you are writing JavaScript and jQuery :)
                            var blog = ($(this).attr("ows_Blog")).split(",")[0];
                            
                            //same thing as the blog, a picture is stored as <url><comma><alt text>
                            var pictureUrl = ($(this).attr("ows_Picture")).split(",")[0];
                            
                            //call a function to add the data from the row to a table on the screen
                            AddRowToTable(name,blog,pictureUrl);
                            
                        });                
                    }
        });

}


function AddRowToTable(name,blog,pictureUrl)
{
    jQuery("#speakerTable").append("<tr align='middle'>" + 
                                "<td><img src='" + pictureUrl + "'><br><a href='" + blog + "'>" + name + "</a></td>" +
                               "</tr>");
                                
}

</script>

<!-- table where our speaker rows will go -->
<table id="speakerTable"></table>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac

ASKER

I get the error,

'xData' is undefined.