I am attempting to create a table in MVC by looping through the model and dynamically creating rows. I need each row, after loaded, to fetch a value from my API and set the background color of that row accordingly. Then, every 3 seconds thereafter, refetch the value from the API and change the background color. My jQuery is getting the initial value but the timer isn't working. Code is below, please help!

@model IEnumerable<BLESolution.Models.RaspberryPi>
@using BLESolution.Controllers
@using BLESolution.Models
@using BLESolution.Repositories.LocationRepository
@using Microsoft.Ajax.Utilities
@Scripts.Render("~/bundles/jquery")

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
//Locations List
var locList = (List<Location>)ViewData["Locations"];
//Counter
int x = 0;
//PiStatusList
var piStatusList = (List<RaspberryPiStatus>)ViewData["StatusList"];
}


<script type="text/javascript">

$(document).ready(function () {

    var x;

    //$(".table tr").each(function () {

    //    $(this).css("background-color:", "red");


    //});

$.get('@Url.Action("GetPiStatus","PiStatus")',{ id:"2" },function(data) {
        $("#showData").html(data);
    });

});

</script>


<h2>Scanner Index</h2>


<div id="showData"></div>

<table class="table">
<tr>
    <th style="width: 10%;"><b>#</b></th> @* # *@
    <th style="width: 15%;"><b>Location</b></th> @* Location *@
    <th style="width: 10%;"><b>Pi</b></th> @* Pi *@
    <th style="width: 25%;">&nbsp;</th> @* Message *@
    <th style="width: 10%;">&nbsp;</th> @* Details *@
    <th style="width: 10%;">&nbsp;</th> @* Settings *@
    <th style="width: 10%;">&nbsp;</th> @* Terminal *@
</tr>

@foreach (var item in Model)
{


<tr id="row-@x.ToString()"style="font-size:larger;font-weight:bolder;  
color:#222222; border: 1px solid #888888;">
        <td>@(x) </td> @* # *@
        <td>@locList[x].LocationName</td> @* Location *@
        <td>@Html.DisplayFor(modelItem => item.RaspberryPiName)</td>   


@*     Pi *@
        <td>

            <script type="text/javascript">

                $.get('@Url.Action("GetPiStatus","PiStatus")', { id:    
 @x.ToString() }, function (data) {
                    if (data === "True") {
                        $("#msgDiv-" + @x.ToString()).html("  
<h6>Available!</h6>");
                        $("#row-" + @x.ToString()).css("background-
color", "rgba(0, 222, 0, 0.5)");
                    }
                    else if (data === "False") {
                        $("#msgDiv-" + @x.ToString()).html("
<h6>Unavailable!</h6>");
                        $("#row-" + @x.ToString()).css("background-
color", "rgba(222, 0, 0, 0.5)");
                    } else {
                        $("#msgDiv-" + @x.ToString()).html("<h6>Unknown!
</h6>");
                        $("#row-" + @x.ToString()).css("background-
color", "lightyellow");
                    }
                });

                setTimeout(function() {                        
                    $.get('@Url.Action("GetPiStatus","PiStatus")', { id: 
@x.ToString() }, function (data) {
                        if (data === "True") {
                            $("#msgDiv-" + @x.ToString()).html("
<h6>Available!</h6>");
                            $("#row-" + @x.ToString()).css("background-  
color", "rgba(0, 222, 0, 0.5)");
                        }
                        else if (data === "False") {
                            $("#msgDiv-" + @x.ToString()).html(" 
<h6>Unavailable!</h6>");
                            $("#row-" + @x.ToString()).css("background-
color", "rgba(222, 0, 0, 0.5)");
                        } else {
                            $("#msgDiv-" + @x.ToString()).html("
<h6>Unknown!</h6>");
                            $("#row-" + @x.ToString()).css("background-
color", "lightyellow");
                        }
                    }, 3000);
                });
            </script>

            <div id="msgDiv-@x.ToString()">



            </div>
        </td>
        <td><a href="@Url.Action("Details", "Pi", new {id =  
item.RaspberryPiId})"><span style="color: black;" class="glyphicon 
glyphicon-tag"></span></a></td> @* Details *@
        <td><a href="@Url.Action("Index", "PiSettings", new {id = 
item.RaspberryPiId})"><span style="color: black;" class="glyphicon  
glyphicon-cog"></span></a></td> @* Settings *@
        <td>&nbsp;</td>

    </tr>


    x = x + 1;
}


</table>

Related posts

Recent Viewed