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

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 3

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