javascript 每 5 秒自动刷新 DIV 内容代码不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18503478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto Refresh DIV contents every 5 seconds code not working
提问by ronan
Im using Spring MVC In My editStatus.jsp I have the following code to refresh a DIV every 5 seocnds
我在我的 editStatus.jsp 中使用 Spring MVC 我有以下代码每 5 秒刷新一个 DIV
function refreshDiv(){
$.ajax({
url: 'editStatus.jsp'
}).done(function(result) {
$('#refreshDIV').text(result);
});
}
And My DIV code is
我的 DIV 代码是
<div class="span5">
<div class="row-fluid form-inline">
<h4 class="inline">
<spring:message code='alert.status' />
</h4>
</div>
<div class="row-fluid">
<div class="span5 row-fluid">
<div class="span9">
<div class="row-fluid">
<div class="span12">
<label>
<spring:message code='alert.sent' />:
</label>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label>
<spring:message code='alert.in.progress' />:
</label>
</div>
</div>
</div>
</div>
<!-- this has to be calculated, loop through 3 times seems excessive -->
<c:forEach var="channel" items="${StatusForm.channels}">
<c:set var="currentChannel" value=""></c:set>
<c:set var="channelIcon" value=""></c:set>
<c:if test="${channel == 'Email'}" >
<c:set var="currentChannel" value="EMAIL"></c:set>
<spring:url value="/static/img/icon_email_channel.png" var="channelIcon" />
</c:if>
<c:if test="${channel == 'SmsChannel'}" >
<c:set var="currentChannel" value="SMS"></c:set>
<spring:url value="/static/img/icon_sms_channel.png" var="channelIcon" />
</c:if>
<c:if test="${channel == 'VoiceChannel'}" >
<c:set var="currentChannel" value="VOICE"></c:set>
<spring:url value="/static/img/icon_voice_channel.png" var="channelIcon" />
</c:if>
<div id="refreshDiv" class="span3" >
<c:set var="map" value="${StatusForm.channelStateForRecipients[currentChannel]}"></c:set>
<div>
<label style="color:black" ><img src="${channelIcon}">
${fn:length(StatusForm.totalSentRecipient)}
</label>
</div>
<div>
<label style="color:black"><img src="${channelIcon}">
${fn:length(StatusForm.totalNotSentRecipient)}
</label>
</div>
<div>
<label style="color:black"><img src="${channelIcon}">
${fn:length(StatusForm.totalInProgressRecipient)}
</label>
</div>
</div>
</c:forEach>
</div>
</div>
From above code I want to auto-refresh the following however the same is not working
从上面的代码我想自动刷新以下但同样不起作用
<div id="refreshDiv" class="span3" >
<c:set var="map" value="${StatusForm.channelStateForRecipients[currentChannel]}"></c:set>
<div>
<label style="color:black" ><img src="${channelIcon}">
${fn:length(StatusForm.totalSentRecipient)}
</label>
</div>
<div>
<label style="color:black"><img src="${channelIcon}">
${fn:length(StatusForm.totalNotSentRecipient)}
</label>
</div>
<div>
<label style="color:black"><img src="${channelIcon}">
${fn:length(StatusForm.totalInProgressRecipient)}
</label>
</div>
</div>
Should the URL refreshing code go through the controller ?
URL 刷新代码应该通过控制器吗？
I tried with
我试过
$(document).ready(function () {
alert('Hi OutBound');
var seconds = 5000; // time in milliseconds
var reload = function() {
alert('Inside Reload');
$.ajax({
url: 'editStatus.jsp',
cache: false,
success: function(data) {
alert('Inside 2');
$('#refreshDIV').html(data);
setTimeout(function() {
alert('Inside SettimeOut');
reload();
}, seconds);
}
});
};
reload();
});
However Alerts alert('Inside 2'); and alert('Inside SettimeOut'); never get called. Please suggest
但是 Alerts alert('Inside 2'); 和 alert('Inside SettimeOut'); 永远不会被调用。请建议
回答by José SAYAGO
I think your refresh function is incomplete, for instance there's nothing that makes it loop. Try something like this:
我认为您的刷新功能不完整，例如没有任何东西可以让它循环。尝试这样的事情：
$(document).ready(function () {
var seconds = 5000; // time in milliseconds
var reload = function() {
$.ajax({
url: 'editStatus.jsp',
cache: false,
success: function(data) {
$('#refreshDIV').html(data);
setTimeout(function() {
reload();
}, seconds);
}
});
};
reload();
});
