Ci aggiungo anche la pagina in .php che contiene la parte ajax per la visualizzazione dinamica dei parametri:
<?php
session_start();
if (!isset($_SESSION['id'])) {
header('location:session_expired.php');
exit;
}
else
$userId = $_SESSION['id'];
$dbHostname = "";
$dbUsername = "";
$dbPassword = "";
$dbDatabase = "";
$con = mysql_connect($dbHostname, $dbUsername, $dbPassword);
if (!$con)
die("Unable to connect to MySQL: " . mysql_error());
mysql_select_db($dbDatabase, $con) or die("Unable to select database: " . mysql_error());
$sql = "SELECT host.addr, host.proto, host.rqst, host.desc FROM host, rela WHERE rela.userId = " . $userId . " AND rela.hostId = host.id";
$result = mysql_query($sql);
if (!$result)
die("Database access failed: " . mysql_error());
$numRows = mysql_num_rows($result);
mysql_free_result($result);
if (empty($_GET['place']))
$place = 0;
else
$place = $_GET['place'];
$sql = "SELECT host.id, host.addr, host.proto, host.rqst, host.desc FROM host, rela WHERE rela.userId = " . $userId . " AND rela.hostId = host.id LIMIT " . $place . ", 1";
$result = mysql_query($sql);
if (!$result)
die("Database access failed: " . mysql_error());
$obj = mysql_fetch_object($result);
mysql_free_result($result);
mysql_close($con);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>ThermoWeb 1.0</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var url = "get.php?addr=<?php echo $obj->addr; ?>&proto=<?php echo $obj->proto; ?>&rqst=<?php echo $obj->rqst; ?>";
var set;
function ajaxRequest() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json=eval("("+xmlhttp.responseText+")");
document.getElementById("temp").innerHTML = Math.round(json.temp * 10) / 10 + "°C";
document.getElementById("tSet").innerHTML = json.tSet;
switch (json.mode) {
case 0: document.getElementById("offOff").style.visibility = "hidden";
document.getElementById("onOff").style.visibility = "visible";
document.getElementById("autoOff").style.visibility = "visible"; break;
case 1: document.getElementById("offOff").style.visibility = "visible";
document.getElementById("onOff").style.visibility = "hidden";
document.getElementById("autoOff").style.visibility = "visible"; break;
case 2: document.getElementById("offOff").style.visibility = "visible";
document.getElementById("onOff").style.visibility = "visible";
document.getElementById("autoOff").style.visibility = "hidden";
}
switch (json.info) {
case 0: document.getElementById("info").innerHTML = "St-By"; break;
case 1: document.getElementById("info").innerHTML = "Run";
}
set = json.tSet;
if (set <= json.tMin) {
document.getElementById("mOn").style.visibility = "hidden";
}
else {
document.getElementById("mOn").style.visibility = "visible";
}
if (set >= json.tMax) {
document.getElementById("pOn").style.visibility = "hidden";
}
else {
document.getElementById("pOn").style.visibility = "visible";
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function setMode(val) {
var oldUrl = url;
url = url + "91" + val + "000";
ajaxRequest();
url = oldUrl;
}
function setTemp(val) {
var oldUrl = url;
if (val == 0)
set--;
if (val == 1)
set++;
url = url + "9001" + set;
ajaxRequest();
url = oldUrl;
}
window.onLoad = ajaxRequest();
setInterval(ajaxRequest, 1000);
</script>
</head>
<body>
<div class="container">
<h1><?php
if ($place != 0) {
echo '<a href="show.php?place=';
echo $place - 1;
echo '"><</a>';
}
else
echo '<';
echo ' ' . $obj->desc . ' ';
if ($place + 1 < $numRows) {
echo ' <a href="show.php?place=';
echo $place + 1;
echo '">></a>';
}
else
echo '>';
?></h1>
<div class="content">
<h1 id="temp">00.0°C</h1>
<div class="barElements">
<h1>Set</h1>
<div id="mOff">
<a id="mOn" href="javascript:setTemp(0)"><img src="images/mOn.png" width="30" height="30" alt="-" /></a>
</div>
<h2 id="tSet">00</h2>
<div id="pOff">
<a id="pOn" href="javascript:setTemp(1)"><img src="images/pOn.png" width="30" height="30" alt="+" /></a>
</div>
</div>
<div class="barElements">
<h1>Mode</h1>
<div id="offOn">
<a id="offOff" href="javascript:setMode(0)"><img src="images/offOff.png" width="30" height="30" alt="Off" /></a>
</div>
<div id="onOn">
<a id="onOff" href="javascript:setMode(1)"><img src="images/onOff.png" width="30" height="30" alt="On" /></a>
</div>
<div id="autoOn">
<a id="autoOff" href="javascript:setMode(2)"><img src="images/autoOff.png" width="30" height="30" alt="Auto" /></a>
</div>
</div>
<div class="barElements">
<h1>Status</h1>
<h2 id="info">null</h2>
</div>
<div class="barElements">
<h1>Preferences</h1>
<div class="ico">
<a href="crono.php?hostId=<?php echo $obj->id; ?>"><img src="images/crono.png" width="30" height="30" alt="Crono" /></a>
</div>
<div class="ico">
<a href="#"><img src="images/pref.png" width="30" height="30" alt="Preferences" /></a>
</div>
</div>
</div>
<div class="footer">
<p>© ThermoWeb <?php echo date("Y"); ?> | <a href="#">help</a> |</p>
</div>
</div>
</body>
</html>