jQuery for SharePoint Web Services

The “core” of the jQuery Library for SharePoint Web Services is the $().SPServices function, which allows you to simply call each Web Service operation.

The table below shows the Web Services currently available in the library and where they work, along with links to the MSDN documentation:

Web Service	WSS 3.0	MOSS	MSDN Documentation
Alerts			Alerts Web Service
Authentication			Authentication Web Service
Forms			Forms Web Service
Lists			Lists Web Service
Permissions			Permissions Web Service
Users and Groups			Users and Groups Web Service
Versions			Versions Web Service
Views			Views Web Service
WebPartPages			Web Part Pages Web Service
Webs			Webs Web Service
PublishedLinksService			PublishedLinksService Web Service
Search			Search Web Service
UserProfileService			User Profile Web Service
Workflow			Workflow Web Service

 

Calling the Library

To set things up to use the jQuery Library for SharePoint Web Services, you’ll need to add references to it and the core jQuery library in the right context for what you are trying to accomplish.

<script src="/TimeSheet/jQuery%20Libraries/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/TimeSheet/jQuery%20Libraries/jquery.SPServices-0.5.6.min.js" type="text/javascript"></script>

What all this adds up to is that you can use the jQuery Library for SharePoint Web Services to call any of the Web Service operations it wraps as simply as this:

   1: $().SPServices({

   2:    operation:  "GetList",

   3:    listName:  "Project",

   4:    completefunc: function  (xData, Status) {

   5:      ...do something...

   6:    }

   7: });

The Results

When you make one of these calls, you get back XML, just as you’ve passed XML into it. As I was building the library, I found that I very often wanted to see what was in that XML in an easy to read format, so I built the $().SPServices.SPDebugXMLHttpResult function. If you’re comfortable with XML and debugging tools, you may never need this function, but I find it useful. If you wanted to use it in the above example, replace the completefunc with this:

   1: completefunc: function (xData, Status) {

   2:    var out =  $().SPServices.SPDebugXMLHttpResult({

   3:      node:  xData.responseXML

   4:    });

   5:    $(divId).html("").append("<b>This  is the output from the GetList operation:</b>" + out);

   6: }

where divId is the ID for a DIV on the calling page where you’d like to place the results. The output from the $().SPServices.SPDebugXMLHttpResult function for GetList will look something like this excerpt:

 

On the other hand, if you’d like to work with the output, you’d probably do something like this:

   1: $().SPServices({

   2:    operation:  "GetList",

   3:    async: false,

   4:    webURL: opt.webURL,

   5:    listName:  opt.listName,

   6:    completefunc:  function(xData, Status) {

   7:      $(xData.responseXML).find("Field").each(function()  {

   8:        if($(this).attr("StaticName")  == opt.columnStaticName) displayName = $(this).attr("DisplayName");

   9:      });

  10:    }

  11: });

This example comes from the $().SPServices.SPGetDisplayFromStatic function. In the completefunc, I find all of the Field elements, iterate through them until I find the one I’m looking for, then grab the DisplayName attribute to return.

Source Reference