SharePoint SOAP GetListItems VS jQuery - 如何使用Ajax循环自定义列表项以及Ajax刷新列表内容？

Question

我正在使用jQuery通过GetListItems方法访问Sharepoint 2007的SOAP接口来读取自定义公告列表，以便每分钟刷新一次该列表（如果列表的所有者添加了新内容，则新的内容变得可见而没有最终用户刷新他们的分享点屏幕）。我想要做的不仅是刷新列表，我希望列表中的每个项目一次循环一次（也许每个项目保持可见10秒，然后下一个项目将加载到该空间中。

这里是我的代码至今：

<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"/>&nbsp;</div> 

这是很简单的东西，所以到目前为止（虽然寻找体面的文件为你能与GetListItem SOAP请求做的是一项艰巨的）里面的。我遍历返回的行（PprocessResult函数）的块，我重置了分配给DIV块的HTML，以便只有一行显示为输出。代码设置的方式，这意味着只有最后一行排入我的自定义列表将可见，因为我没有代码暂停迭代。

我的想法一直缠绕定时器周围的代码块：

$(xData.responseXML).find("z\\:row").each(MYTIMER(10000, function(){... 

但是我遇到了零或混合的结果。

我的问题给你所有的是：什么是最好的方式来设置我的当前代码来刷新源列表数据，就像它现在一样，并循环查询从列表中的结果一次一个（最好用每个项目上的小暂停，以便人们可以阅读它）？

Answer 1

我会保持你的视觉周期和你的数据更新周期作为独立的实体。

设置你的超时功能，以更新一个显示你的数据的div容器。你可以根据你的愿望添加和删除这个列表。

你可能会喜欢的东西开始：

<div id="container"> 
    <div id="1" class="task">task foo</div> 
    <div id="2" class="task">task bar</div> 
    <div id="3" class="task">task baz</div> 
</div> 

然后数据更新后，可以添加其他元素：

<div id="container"> 
    <div id="1" class="task">task foo</div> 
    <div id="2" class="task">task bar</div> 
    <div id="3" class="task">task baz</div> 
    <div id="4" class="task">task lol</div> 
</div> 

然后通过的有序集合使用周期插件简单循环div在给定的容器元素内。它将始终显示集合中的下一个div，而不是依赖更新插件重新启动周期。

jQuery中最流行的插件是jquery.cycle.js，位于http://malsup.com/jquery/cycle2/。您也可能对在线提供的'lite'版本感兴趣。

Answer 2

实际上，任何人都没有办法知道这个，这个失败的原因是因为有人安装了一个旧的网站集jQuery软件包，并且jCycle的效果不好。一旦我停用集合上的功能，重新启动IIS，并刷新页面，一切正常。作为额外的一步，我将jQuery的最新完整版本下载到文档库中，并链接到它，而不是Google托管的脚本版本。所以我现在使用的所有js都在网站集内。

我能弄清楚jQuery的冲突版本，但使用Firebug的控制台和脚本调试器。我必须将调试器设置为停止所有错误，但第一个出现的错误是引用了网站集jQuery包，而不是我包含的Google代码。这就是我回答我自己的问题的原因。还有其他可怜的混蛋在做SharePoint开发，他们可能不会使用FireFox来测试他们的SP安装，因为它对IE和所有IE有多大的支持。

感谢所有阅读和回答/评论的人！