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 simp

Answer 1

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 2

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 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

Answer 4

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 5

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 6

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.