Refreshing multiple divs at separate times on the same page

Question

Below is the code I use to make separate divs based on how many projects my company is currently working on. Each div contains whether or not the latest builds on projects have succeeded or failed.

I currently have this set to automatically refresh between 120 and 180 seconds. At the moment, every div will refresh at the same time. I would like it so each div will randomly refresh on it's own.

CSHMTL creating the divs:

@if (Model.Client.ClientStatus != null && Model.Client.ClientStatus.Trim() != "InActive")
{
<div class="span4 dashboard-success">

<div class="well dashboard-well" style="display:none;">
    <div class="loading">Loading...</div>
    <div> 
        <div class="dashboard-link">

            <h3>@Html.ActionLink(Model.Client.ClientName, "Details", new { controller = "Client", ClientId = Model.Client.ClientID })</h3>
        </div>
    </div>
    @foreach (var project in Model.Client.Projects)
    {

        <div>        
            <div class="dashboard-link">
                <h4>@Html.ActionLink(project.ProjectName, "Details/" + project.ProjectID, "project", new { controller = "Client", ClientId = Model.Client.ClientID },
                    new { controller = "Project", ProjectId = project.ProjectID })</h4>

            </div>

      @if (project.ProjectStatus != null && project.ProjectStatus.Trim() != "InActive")
      {
            <table class="build table table-condensed">
                @foreach (var build in project.Builds)
                {          


                    <tr id="@project.ProjectName.Trim().ToLower().Replace(" ", "_").Replace(".", "").Replace("-", "").Replace("[", "").Replace("]", "")@build.BuildConfigID">
                        <td>                            
                            <!--Adds a link back to client project build details-->

                                <a href = @Url.Content("client/" + Model.Client.ClientID.ToString() + "/project/" +
                                        project.ProjectID + "/build/Details/" + build.BuildID)>@build.BuildName</a>

                        </td>
                        <td class="date">
                        </td>
                        <td class="user">   
                        </td>
                        <td class="status">
                        </td>
                    </tr>                 
                }
            </table>
      }
        </div> 
    }
</div>

Javascript handling the refresh of the page:

function random(x) {
  return Math.floor(x * (Math.random() % 1))
}

function randomBetween(MinV, MaxV) {
    return MinV + random(MaxV - MinV + 1)
}

$(function () {
    UpdateStatus();
    window.setInterval(UpdateStatus, randomBetween(120000, 180000))
})

These are all currently placed in a partial view. Any thoughts or suggestions will be greatly appreciated.

EDIT: Requested code for UpdateStatus()

function UpdateStatus() {
    $(".dashboard-well").show().css({ 'background-color': "black", 'overflow': "hidden" })
    $(".loading").show()
    $("td").hide()
    $(".status").hide()
    $.ajax
    ({
        url: "/Build/AllStatuses", //New ULRs
        dataType: 'json',
        success: function (buildstatuses) {

            for (var i in buildstatuses) {
                var status = buildstatuses[i];
                var statusColor = 'black';
                switch (status.status) {
                    case "SUCCESS":
                        statusColor = "green";
                        break;
                    case "FAILURE":
                        statusColor = "#99182C";
                        break;
                    case "ERROR":
                        statusColor = "#CD950C";
                        break;
                    default:
                        statusColor = "black";
                        break;
                }
                var rowID = $.trim(new String(status.teamCityProject).toLowerCase().replace(/ /g, "_").replace(/\./g, "").replace(/-/g, "").replace(/\[/g, "").replace(/]/g, "")) + status.id;


                $("tr#" + rowID + " td.status").html(status.status).css({ 'color': statusColor, 'font-weight': 'bolder' })
                if (status.status != "SUCCESS") {



                    var row = $("tr#" + rowID)

                    row.parent().parent().parent().parent().parent().removeClass("dashboard-success").addClass("dashboard-fail");

                    row.parent().parent().prepend(row.clone());  // Places Failure at the top by cloning then removing
                    row.remove();

                }

                $("tr#" + rowID + " td.date").html(status.date)
                $("tr#" + rowID + " td.user").html(status.user)

                // jQuery show hide
                $(".loading").hide()
                $(".dashboard-well").show().css({ 'background-color': "#D8D8D8", 'overflow': "auto" })
                $(".status").show()
                $("td").show()


            }

            //Sets Failed results to the left
            $("div.dashboard-fail").each(function () {

                var div = $(this);

                div.parent().prepend(div.clone());
                div.remove();

            });

            // Scroll to the bottom of the Div defined and scroll up --> See scroll function at top

            scrollDown();
            scrollUp();
            scrollDown();
        }

    })
}
</script>

Answer 1

Try something along the lines of:

<script type="text/javascript">
$(function () {
    UpdateStatus("@Model.Client.ClientID")
    var random = randomBetween(120000, 180000)

    window.setInterval(function(){
        UpdateStatus("@Model.Client.ClientID")
    }, random)
})
 </script>

This will be added to your .cshtml page, this will call the UpdateStatus function, which I think wasn't happening before, let me know if this works.

Answer 2

I would advise against a completely random refresh of these divs, because the randomness effectively eliminates the possibility to even out the stress on the server.

I would therefore advise you to use the random counter to trigger an update-wave, which will update a single div, get the new version and then update the next. If you've got many divs it might be worthwile to update multiple containers at once (so the wave actually finishes before the next wave starts). Setting a random start for the wave allows you to have multiple clients update their div-containers at different times - which evens out the concurrent stress on your server.

For updating a single div I'd suggest modifying your UpdateStatus()-function so it updates one particular project, identified by the ProjectID (you seem to have access to this information, so why not use it). When the UpdateStatus(ProjectID)-function finishes, you take the div that contains this project's information and update it accordingly.