While doing some housekeeping recently on my personal site I was tinkering around with a pre-jQuery ajax enabled web part I had written to display random quotes from a SharePoint list on the site. The code was pretty ugly so I decided to adapt the web service call to use jQuery instead in line with the similar functions displays I’ve been deploying lately.
I thought I might take the time to share it as well since jQuery is still a hot topic.
Here is what the display looks like.
The SharePoint list is a basic list with a column for the Quote and a column for the Author.
The code is currently hosted in a Content Editor Web Part (CEWP) and is pretty simple stuff. If you are going to use this, just be sure to put in the name or GUID of the list and the URL to the site's list web service. Here is what it looks like:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" mce_src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var URL = ""; // URL ex. http://mycompany/sites/sub-site/_vti_bin/lists.asmx
var listName = ""; // List Name or GUID
var soapEnv = "<?xml version='1.0' encoding='utf-8'?> \
<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>" + listName + "</listName> \
<viewFields><ViewFields> \
<FieldRef Name='Quote' /> \
<FieldRef Name='Author0' /> \
</ViewFields></viewFields> \
</GetListItems> \
</soapenv:Body> </soapenv:Envelope>";
$.ajax({
url: URL,
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction",
"http://schemas.microsoft.com/sharepoint/soap/GetListItems");
},
type: "POST",
dataType: "xml",
data: soapEnv,
complete: DisplayQuote,
error: function(xhr) { $("#errorContainer").html('Error: ' + xhr.status + ' ' + xhr.statusText); },
contentType: "text/xml; charset=\"utf-8\""
});
});
function DisplayQuote(xData, status)
{
var Output;
var WikiString = "http://en.wikipedia.org/wiki/Special:Search?fulltext=Search&search="
var xmlDoc = xData.responseXML;
var ListItems = xmlDoc.getElementsByTagName("z:row") || xmlDoc.getElementsByTagNameNS("*","row");
var SelectedItem = Math.floor(Math.random()* ListItems.length);
var Quote = ListItems[SelectedItem].getAttribute("ows_Quote");
var Author = ListItems[SelectedItem].getAttribute("ows_Author0");
Output = "<i>" + Quote + "</i> - " + "<a href=" + WikiString + encodeURI(Author) + ">" + Author + "</a>";
$("#quoteContainer").html(Output);
}
</script>
While this is simple code, it can be applied to so many different things. You can use it to generate a slide show, show random images, etc.
The source files are available here:
