Question

I’m developing a dashboard using ASP.NET MVC3 and need to have two divs which contain a partial view each, refresh the data at different intervals.

So, div “results” that contains “PartialOverview” refresh at 1 minute, and div “rain” that contains “PartialOverviewRainfall” refresh at 15 minutes.

The index page that references the two partial views/divs is where I have put the JQuery code. It works when I just use one div, the “PartialOverview” as that is the bulk of the display, but I can’t seem to get the code right to include another div.

Here’s my code:

<script type="text/javascript">
  $(document).ready(function() {
    $("#results").load("/EDM/Index");  
    setInterval(function() {
        $("#results").load("/EDM/Index");
    }, 60000); //Refreshes every 60 seconds  
    $.ajaxSetup({ cache: false });  
 }); 
</script> 

<div id="rain">
  @Html.Partial("PartialOverviewRainfallList")
</div>
<div id="results">
  @Html.Partial("PartialOverviewList")
</div>

Is there a way to adapt the javascript code to include the two divs?

Answer 1

You could add another setInterval for the other partial:

<script type="text/javascript">
    $(document).ready(function() {
        window.setInterval(function() {
            $("#results").load("/EDM/Index");
        }, 60000); //Refreshes every 60 seconds  

        window.setInterval(function() {
            $("#rain").load("/EDM/Rain");
        }, 900000); //Refreshes every 15 minutes

        $.ajaxSetup({ cache: false });  
    }); 
</script> 

or try to use a more generic solution (using for example HTML5 data-* attributes):

<div id="rain" class="refresh" data-interval="60000" data-url="@Url.Action("rainr", "edm")">
    @Html.Partial("PartialOverviewRainfallList")
</div>
<div id="results" class="refresh" data-interval="900000" data-url="@Url.Action("index", "edm")">
  @Html.Partial("PartialOverviewList")
</div>

and then:

<script type="text/javascript">
    $(document).ready(function() {
        $('.refresh').each(function() {
            var element = $(this);
            var url = element.data('url');
            var interval = element.data('interval');
            (function(element, url, interval) {
                window.setInterval(function() {
                    element.load(url);
                }, interval);
            })(element, url, interval);
        });
        $.ajaxSetup({ cache: false });  
    }); 
</script> 

Now you could even put this into a separate javascript file where it belongs.