I am using jQuery to access Sharepoint 2007's SOAP interface via the GetListItems method to read in a custom list of announcements in such a way as to have that list refresh once a minute (in case the owners of the list add new content, so that the new content becomes visible without having the end user refresh their sharepoint screen). What I would like to do is not only refresh that list, I would like to have each item in the list cycle through one at a time (maybe have each item stay visible for 10 seconds, then the next item would load into that space.
Here is the code I have so far:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/SiteCollectionDocuments/jquery.timers-1.0.0.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
// Create the SOAP request
// NOTE: we need to be able to display list attachments to users, hence the addition of the
// <queryOptions> element, which necessitated the addition of the <query> element
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>testlist</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='Body' /> \
<FieldRef Name='ID' /> \
<FieldRef Name='Attachments' /> \
</ViewFields> \
</viewFields> \
<query> \
<Query /> \
</query> \
<queryOptions> \
<QueryOptions> \
<IncludeAttachmentUrls>TRUE</IncludeAttachmentUrls> \
</QueryOptions> \
</queryOptions> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
// call this SOAP request every 20 seconds
$("#tasksUL").everyTime(20000,function(i){
// our basic SOAP code to hammer the Lists web service
$.ajax({
url: "http://ourdomain.net/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
error: printError,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});
});
// basic error display that will pop out SOAP errors, very useful!
function printError(XMLHttpRequest, textStatus, errorThrown)
{
alert("There was an error: " + errorThrown + " " + textStatus);
alert(XMLHttpRequest.responseText);
}
// main method that will cycle through the SoAP response nodes
function processResult(xData, status)
{
$(xData.responseXML).find("z\\:row").each(function()
{
// resets display element
$("#tasksUL").empty();
// gets attachments array - if there is more than one attachment,
// they get seperated by semi-colons in the response
// they look like this natively (just an example):
// ows_Attachments = ";#http://server/Lists/Announcements/Attachments/2/test.txt;
// #http://server/Lists/Announcements/Attachments/2/UIP_Setup.log;#"
var mySplitResult = $(this).attr("ows_Attachments").split(";");
// set up storage for later display of images
var notice_images = "";
// processes attachments - please forgive the kludge!
for(i = 0; i < mySplitResult.length; i++)
{
// check to see the proper link URL gets chosen
if (i % 2 != 0 && i != 0)
{
// strips out pound sign
mySplitResult[i] = mySplitResult[i].replace("#", "");
// (possibly redundant) check to make sure element isn't simply a pound sign
if (mySplitResult[i] != "#")
{
// adds an img tag to an output container
notice_images = notice_images + "<img src='" + mySplitResult[i] + "' border='0' align='right' style='float:right;' /><br />";
}
}
}
// create final output for printing
var liHtml = "<h3>" + $(this).attr("ows_Title") + "</h3><p>" + notice_images + $(this).attr("ows_Body") + "</p>";
// assign output to DIV tags
$("#tasksUL").html(liHtml);
});
}
</script>
<div id="tasksUL"/> </div>
It's pretty simple stuff so far (although finding decent documentation as to what you are able to do with the GetListItem SOAP request was daunting). Inside of the block where I iterate through the returned rows (the PprocessResult function), I am resetting the HTML being assigned to the DIV block so that only one row is showing as output. The way the code is set up, this means only the very last row in my custom list will be visible, as I have no code pausing the iterations.
My thought had been to wrap a timer around this block of code:
$(xData.responseXML).find("z\\:row").each(MYTIMER(10000, function(){...
But I met with zero or mixed results.
My question to you all is: What would be the best way to set up my current code to both refresh the source list data like it is now AND cycle through query results from that list one at a time (preferably with a small pause on each item so that people can read it)?
