SOAP を介して SharePoint リストからすべてのリスト アイテムを取得し、それらを FAQ の形式でページに書き込むコード ブロックがあります。このリストは長くなる可能性があるため、質問のみが表示されるようにページに書き込みたいと思います。質問をクリックすると、その質問の特定のパネルとそのパネルのみが表示されます。
私は、私の日光を悩ませている 1 つの小さな部分を除いて、すべて動作するコードを持っています-
<link rel="stylesheet" href="/sites/someSite/System%20Resources/FAQ2.css" type="text/css"/>
<script src="/sites/someSite/System%20Resources/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".question").click(function(){
$("#a"+$(this).attr("id")).slideToggle("slow");});
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>A Big Fat FAQ</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Question_x0020_Description' /> \
<FieldRef Name='Response'/> \
<fieldRef Name='ID'/>\
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "/sites/someSite/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});
function processResult(xData, status) {
$(xData.responseXML).find("z\\:row").each(function() {
var iDesc=$(this).attr("ows_Question_x0020_Description");
var iResp=$(this).attr("ows_Response");
var iID=$(this).attr("ows_ID");
var liHtml = "<div class='question' id='"+iID+"'>" + iDesc + "</div><div class='answer' id='a"+iID+"'><a href='/sites/someSite/Lists/FAQ/DispForm.aspx? ID='"+iID+"'>"+ iResp +"</a></div>";
alert(liHtml);
$("#FAQ").append(liHtml);
});
}
</script>
<h1>A Big Fat FAQ</h1>
<div id="FAQ"></div>
画面上の質問のクリックイベントが応答しないことを除いて、すべてが機能します。
liHtml 変数として何を出力しているのかを示すアラートを表示した後、iDesc 変数の周りに追加のタグ セットが挿入されていることがわかりました。そのため、クリックする必要はありません。
<div class='question'id='5'>
<div>Why is the sky blue?</div>
</div>
これが問題かもしれないと思いました。質問の説明と回答の列が両方ともリッチ テキストに設定されていたため、余分なタグが発生していました。両方をプレーンテキストに変更したところ、余分な div が削除され、質問と回答の div の両方に正しい ID が含まれていますが、まだ機能していません。これはおそらく小さな構文エラーのもう 1 つですが、他に何が問題なのかについては、ここでは空白にしています。