javascript - Auto Refresh DIV contents every 5 seconds code not working

Question

Im using Spring MVC In My editStatus.jsp I have the following code to refresh a DIV every 5 seocnds

function refreshDiv(){
     $.ajax({
        url: 'editStatus.jsp'
    }).done(function(result) {
        $('#refreshDIV').text(result);
    });
}

And My DIV code is

<div class="span5">
        <div class="row-fluid form-inline">
            <h4 class="inline">
                <spring:message code='alert.status' />&nbsp;
            </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}">&nbsp;
                               ${fn:length(StatusForm.totalSentRecipient)}
                        </label>
                    </div>
                    <div>
                        <label style="color:black"><img src="${channelIcon}">&nbsp;
                               ${fn:length(StatusForm.totalNotSentRecipient)}
                        </label>
                    </div>
                    <div>
                        <label style="color:black"><img src="${channelIcon}">&nbsp;
                               ${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}">&nbsp;
                               ${fn:length(StatusForm.totalSentRecipient)}
                        </label>
                    </div>
                    <div>
                        <label style="color:black"><img src="${channelIcon}">&nbsp;
                               ${fn:length(StatusForm.totalNotSentRecipient)}
                        </label>
                    </div>
                    <div>
                        <label style="color:black"><img src="${channelIcon}">&nbsp;
                               ${fn:length(StatusForm.totalInProgressRecipient)}
                        </label>
                    </div>
</div> 

Should the URL refreshing code go through the controller ?

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

Answer 1

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();
});