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有多大的支持。

感謝所有閱讀和回答/評論的人！