views:

436

answers:

3

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.

A: 

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);
}
Kaleb Brasee
Tried that also, it still stops.
thealliedhacker
Hmm... must be some sorta weirdness going on with the .NET stuff that I am unaware of.
Kaleb Brasee
A: 

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.

ithcy
I have a loading animation that shows if it's even trying. The loading animation stops when the timer stops.
thealliedhacker
A: 

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

maciejgren
Still didn't fix anything. And yes, it's a partial view.
thealliedhacker
did you try to run the sample code from the link above?
maciejgren