このように生成されたWebページのセクションがあります。
<table>
<c:forEach items="${personList}" var="person">
<tr>
<td>
</td>
<td>
<h2 style="text-align:left;">${person.reviewName}</h2>
<h2 style="text-align:right;">by ${person.name}</h2>
</td>
</tr>
<tr>
<td style="text-align:right;">
<img src="<c:url value="/resources/${person.id}.jpg" />" >
</td>
<td>
${person.review}
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="${person.id}" class="comment">comments</div>
</td>
</tr>
<tr id="ins${person.id}">
<td>
</td>
<td id="comments${person.id}" style="display:none">
<div id="ins${person.id}">
<table>
<c:forEach items="${person.comments}" var="comment">
<tr>
<td>
${comment}
</td>
</tr>
</c:forEach>
</table>
Add Comment:
<textarea id="comment${person.id}"></textarea>
<button onClick="addComment(${person.id})">add Comment</button>
</div>
</td>
</tr>
</c:forEach>
</table>
このように新しいコメントが追加されたときに、JQuery.load()を使用してコメントセクションを即座に更新しようとしています。
function addComment(id) {
$.getJSON("addComment", {id:id, comment:$("#comment" + id).val()});
$("#comments2").load("home #ins2");
}
問題は、クリックしてコメントを追加すると、以前に追加したコメントのみが表示されることです。つまり、コメントセクションは常に1コメント遅れています。コメントを追加した直後にページをロードすると、本来のように表示されます。もう1つの奇妙なことは、コメントを追加すると、コメントの上部に空白行が挿入されることです。これは、ページを直接読み込んだときにそこにない/消えます。
これはある種のキャッシュの問題かもしれないと思ったので、を使用してオフにしてみました
$.ajaxSetup ({
cache: false
});
しかし、これは何の違いもありませんでした。
私はこれで本当に行き詰まっています。load()がforEachタグであるため、プルしているセクションと関係がありますか?