SharePoint 2010 and JQuery

Recently somebody wanted to know how they could streamline activity on a site starting with reducing the overall page refresh count. Put simply, jQuery really is a lifesaver for this stuff. Combined with SharePoints web services and SPServices there is a huge amount that you can do without having to resort to writing any C#. The challenge, as with most things, is how to get started. Below are some simple examples of functional code that will work if you copy and paste correctly.

Example 1: Getting items from a list, in this case called “TestList1”, and output the raw response into a div tag called “demodiv1”
$(document).ready(function() {
$().SPServices({
debug: true,
operation: “GetList”,
listName: “TestList1”,
completefunc: function (xData, Status) {
var out = $().SPServices.SPDebugXMLHttpResult({
node: xData.responseXML
});
$(“#demodiv1”).html(“”).append(“This is the output from the GetList operation:” + out);
}
});
});

Example 2:  Getting all sub sites from a URL, in this case called “http://testserver/webapp1”, and output the raw response into a div tag called “demodiv2”
NOTE: The URL for the site can be defined in two ways, both shown. The one that is not commented is persistent – therefore rather useful!

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
//webUrl: “http://testserver/webapp1”,
completefunc: function (xData, Status) {
var out = $().SPServices.SPDebugXMLHttpResult({
node: xData.responseXML
});
$(“#demodiv2“).html(“”).append(“This is the output from the GetList operation:” + out);
}
});
});

Example 3: What kind of data exactly is being returned? Okay so if you have tried the first two examples you will have noted that the data really is kind of raw. Let’s see it in a popup. In this case the same code as above with a difference… Instead of updating a DIV tag we just populate a popup by using an alert.
Note: Play around with alert(“XML=” + xData.responseXML.xml); and alert(“xData: ” + xData.responseText);

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
completefunc: function (xData, Status) {
alert(“Status=” + Status + ” XML=” + xData.responseXML.xml);
});
}
});
});

Example 4: Okay, so now lets take the same data and wrap the title of each returned site in its respective URL inside of a DIV called tasksUL.

$(document).ready(function() {
$().SPServices.defaults.webURL = “http://testserver/webapp1”;
$().SPServices({
debug: true,
operation: “GetWebCollection”,
completefunc: function(xData, Status) {
// now iterate through the results
$(xData.responseXML).find(“[nodeName=Web]”).each(function () {
// for each one found get the title and wrap it with the respective Url
$(“” + $(this).attr(“Title”) + ““).appendTo(“#tasksUL”);
                });
}
});
});