setInterval stops after Ajax request

Question

I'm using Asp.net MVC and I want my partial view to refresh on an interval, which it does until I make an unrelated Ajax request, then it stops.

Here are a few simplified snips to illustrate the problem.

in AjaxRefresh.js:

function ajaxRefresh()
{
    var f = $("#AjaxForm");
    $("#AjaxLoading").show();
    $.post(f.attr("action"), f.serialize(), function (context) {
        $("#AjaxDiv").html(context);
        $("#AjaxLoading").hide();
    });
}
setInterval(ajaxRefresh, 1000);

in Index.aspx:

<script type="text/javascript" src="../../Scripts/AjaxRefresh.js"></script>
<div id="AjaxDiv">
    <% Html.RenderPartial("Computers", Model, ViewData); %>
</div>

and this in Computers.ascx:

<% Ajax.BeginForm("Index", new { groupName = Model.Name }, new AjaxOptions() { HttpMethod = "Post", LoadingElementId = "AjaxLoading", UpdateTargetId = "AjaxDiv" }, new { id = "AjaxForm" }); Html.EndForm();%>

<%= Ajax.ActionLink("Send", "Index", new { groupName = Model.Name, data="blah" },
        new AjaxOptions() { HttpMethod="Post", LoadingElementId="AjaxLoading", UpdateTargetId="AjaxDiv" }) %> 

If you click the "Send" link, everything still works, but the page stops refreshing automatically. I've tried subscribing to the ajax events, but Sys.WebForms.PageRequestManager.getInstance() is undefined.

Answer 1

I'm not sure why that would happen, but I have had similar issues in the past with jQuery Ajax refreshes and setInterval. In the end, I switched to a repeating setTimeout and didn't have any problems:

function onLoad() {
    setTimeout(ajaxRefresh, 1000);
} 

function ajaxRefresh()
{
    var f = $("#AjaxForm");
    $("#AjaxLoading").show();
    $.post(f.attr("action"), f.serialize(), function (context) {
        $("#AjaxDiv").html(context);
        $("#AjaxLoading").hide();
    });
    setTimeout(ajaxRefresh, 1000);
}

Answer 2

i wouldn't use setInterval to update the content, as if the content takes more than 1 second to load, you'll have multiple requests in queue..

use setTimeout after the request is complete

function sendRequest(){
    $.ajax({
       /** your post data code **/
       complete : function(xhr, status){
                      setTimeout('sendRequest',1000);
                 }
    });
}

this way the second request wouldn't be made before the first one finishes. and this should solve your problem too.

Answer 3

Try adding a bit of randomness to the URL where you're posting the AJAX request. Something like $.post(f.attr("action")+"?"+Math.random(), ...). I have never figured out why this works, but it does (sometimes). Probably because you're preventing the browser from using a cached result for the AJAX response.

Answer 4

Some silly questions... do you have java script debugging enabled in your browser?

I have made the same example you presented in my sample application and it was not working till I have added following scripts to Site.Master:

<script src="../../Scripts/jquery.js" type="text/javascript" ></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript" ></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript" ></script>

If this doesn't help, check what kind of results you get from the Index method when you click Send. Is it PartialView or regular View? if regular, you are erasing whole page with clean html (even without a document in it).

If this still doesn't help, here is my sample app where your example is working (at least the way how I understand it).

http://www.sendspace.com/file/gk2qro

Answer 5

If your AjaxRefresh.js has just the code you showed us, you can use this code. When the browser call the .js it will start functioning.

var ajax = {

    init: function() {
        ajaxRefresh();
        setTimeout(init, 1000);
    }

    ajaxRefresh: function()
    {
        var f = $("#AjaxForm");
        $("#AjaxLoading").show();
        $.post(f.attr("action"), f.serialize(), function (context) {
            $("#AjaxDiv").html(context);
            $("#AjaxLoading").hide();
        });
    }
}
ajax.init();

Answer 6

Wrapping ajaxRefresh in an anonymous function and calling it with parentheses works for me. So your second-last line of code would be like setInterval(function () { ajaxRefresh() }, 1000).

I don't understand it either.

Answer 7

I just dealt with this same type of issue with setInterval. What I did to make it continue to refresh was after ten requests (interval firings), clear the interval timer and create it again. Effectively restarting it.