Reputation: 37504
This is a mess and does not work as planned. Banging head against wall. There must be a quicker and cleaner way to achieve this, i have 3 divs all with a "p" tag in each. If the values are between certain setpoint then i'm trying to implement a traffic light system by swapping img src's...
jQuery:
$(document).ready(function() {
$.get("db.php?phase=1", function(data){ $("#phase1 p").html(data); });
$.get("db.php?phase=2", function(data){ $("#phase2 p").html(data); });
$.get("db.php?phase=3", function(data){ $("#phase3 p").html(data); });
$.get("db.php?tstamp=1", function(data){ $("#tstamp p").html(data); });
setInterval(function() {
$.get("db.php?phase=1", function(data){ $("#phase1 p").html(data); });
$.get("db.php?phase=2", function(data){ $("#phase2 p").html(data); });
$.get("db.php?phase=3", function(data){ $("#phase3 p").html(data); });
$.get("db.php?tstamp=1", function(data){ $("#tstamp p").html(data); });
}, 60000);
if ($("#phase1 p").val() < 400){
$("#phase1light").attr("src", "/phases/img/green.png");
}
else if (($("#phase1 p").val() > 400 && $("#phase1 p").val() < 500)){
$("#phase1light").attr("src", "/phases/img/amber.png");
}
else if ($("#phase1 p").val() > 500){
$("#phase1light").attr("src", "/phases/img/red.png");
};
if ($("#phase2 p").val() < 400){
$("#phase2light").attr("src", "/phases/img/green.png");
}
else if (($("#phase2 p").val() > 400 && $("#phase2 p").val() < 500)){
$("#phase2light").attr("src", "/phases/img/amber.png");
}
else if ($("#phase2 p").val() > 500){
$("#phase2light").attr("src", "/phases/img/red.png");
};
if ($("#phase3 p").val() < 400){
$("#phase3light").attr("src", "/phases/img/green.png");
}
else if (($("#phase3 p").val() > 400 && $("#phase2 p").val() < 500)){
$("#phase3light").attr("src", "/phases/img/amber.png");
}
else if ($("#phase3 p").val() > 500){
$("#phase3light").attr("src", "/phases/img/red.png");
};
});
HTML:
<div id="phase1">
<p class="results"></p>
<img id="phase1light" src="/phases/img/red.png" />
</div>
<div id="phase2">
<p class="results"></p>
<img id="phase1light" src="/phases/img/red.png" />
</div>
<div id="phase3">
<p class="results"></p>
<img id="phase1light" src="/phases/img/red.png" />
</div>
HELP!
Upvotes: 1
Views: 258
Reputation: 10825
I haven't tested this, but it should work:
phasePath = '/phases/img/';
(function getTheData() {
$.get("db.php?tstamp=1", function(data){ $("#tstamp p").html(data); });
$("div[id^=phase]").each(function() {
var phaseId = $(this).attr('id').substr(5);
$.get("db.php?phase=" + phaseId, function(data){
var phaseVal = data;
if(phaseVal >= 500) {
var phaseImg = 'red.png';
} else {
if(phaseVal >= 400) {
var phaseImg = 'amber.png';
} else {
var phaseImg = 'green.png';
}
}
$("p", this).html(data);
$("img", this).attr("src", phasePath + phaseImg);
});
});
})();
setInterval(getTheData, 6000);
Hope this helps.
Upvotes: 3
Reputation: 11159
.val()
on a p tag? http://api.jquery.com/val/. I don't think you're supposed to do that. Maybe you meant to use .text()
? A straight replace should make it work.
As for cleaning it up a bit, use some functions:
var getPhase = function (phaseNum) {
$.get("db.php?phase="+phaseNum, function(data){ $("#phase" + phaseNum + " p").html(data); setLights(phaseNum); });
}
var setLights = function (phaseNum) {
if ($("#phase" + phaseNum + " p").text() < 400){
$("#phase" + phaseNum + "light").attr("src", "/phases/img/green.png");
}
else if ($("#phase" + phaseNum + " p").text() > 500){
$("#phase" + phaseNum + "light").attr("src", "/phases/img/red.png");
}
else {
$("#phase" + phaseNum + "light").attr("src", "/phases/img/amber.png");
}
}
(var getAllPhases = function () {
for (var i = 1; i < 3; i++) {
getPhase(i);
}
})(); // execute the function immediately
setInterval(getAllPhases, 6000);
I've put a setLights() inside the success function because to me that seems to make sense. If that's not the way you wanted it, try it wherever else is relevant. And BTW, this is untested. If you're not able to resolve any errors, let me know and I'll see if I can help.
Upvotes: 1