here is something that I did, hope it helps you:
back-end, q3.php
<?php
$result = array();
for ($ipa=65, $i = 1; $ipa <= 72; $ipa++, $i++){
$ip = "10.32.12.".$ipa;
$ping_output=array();
exec ("ping -n 1 -w 1 $ip 2>&1", $ping_output, $return_val);
//echo $ip." -> ".$return_val."<br/>".implode('<br/>',$ping_output).'<br/>';
if(stripos($ping_output[2],"TTL")!==false) {
// echo $ip." is On <br/>";
$result["enode".$i] = "on";
} else if(stripos($ping_output[2],"unreachable")!==false){
// echo $ip." is unreachable <br/>";
$result["enode".$i] = "unreachable";
} else if(stripos($ping_output[2],"request")!==false){
// echo $ip." is Off <br/>";
$result["enode".$i] = "off";
}
}
echo json_encode($result);
?>
front-end, q3h.html
<!DOCTYPE html>
<html>
<head>
<title>Node Status</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#wrap {
width: 100%;
margin: auto;
}
div[id*="enode"] {
display: inline-block;
margin: 10px;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="enode1">Node1</div>
<div id="enode2">Node2</div>
<div id="enode3">Node3</div>
<div id="enode4">Node4</div>
<div id="enode5">Node5</div>
<div id="enode6">Node6</div>
<div id="enode7">Node7</div>
<button>update nodes</button>
</div>
<script>
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "q3.php",
dataType: 'json',
success: function (result) {
alert(result);
for (key in result) {
id = "#"+key;
if (result[key] == "on") {
$(id).css("background-color", "green");
}
if (result[key] == "unreachable") {
$(id).css("background-color", "yellow");
}
if (result[key] == "off") {
$(id).css("background-color", "red");
}
}
}});
});
});
</script>
</body>
</html>
so basically, this is what you should do, don't be shy and tell me if this works for you. :)
