我在网页上有一个像这样生成的部分。
<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");
}
问题是,当我点击添加评论时,它只显示我之前添加的评论,这意味着评论部分始终是一个评论。如果我在添加评论后直接加载页面,则显示应该显示的页面。另一个奇怪的事情是,当我添加注释时,在注释的顶部插入一个空白行,当我直接加载页面时,它不存在/消失。
我认为这可能是某种缓存问题,因此尝试使用
将其关闭$.ajaxSetup ({
cache: false
});
然而这没有任何区别。
我真的走到了尽头。是否与我正在使用load()作为forEach标记的部分有关?
答案 0 :(得分:5)
您需要在success
方法的getJSON
回调中加载评论,等待getJSON
来电结束,然后重新加载div
。
function addComment(id) {
$.getJSON("addComment", {id:id, comment:$("#comment" + id).val()}, function(){
$("#comments2").load("home #ins2");
});
}