AJAX first attempt json data element not changing - ajax

Question

Hi I have my first AJAX JSON working and it returns C5:3; at the moment for development and displays this in a div, a img tag should be replaced from a off.png to a on.png but this isn't happening. Would appreciate if anyone could through some light on this?? here is my code
$("button.checkStatus").click(function(){
//This Ajax checks the current on/off status of the passed X10 code
$('img.checkStatus').each(function(i, obj) {
$x10Device = $(this).data("x10");
var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&
f=DeviceStatus&d=" + $x10Device ;
$.ajax({
type: "POST",
dataType: "json",
data: postData,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
}
},
url: 'urlencodeJson.php',
success: function(data) {
// 'data' is a JSON object which we can access directly.
// Evaluate the data.success member and do something appropriate...
if (data.success == true){
$('#section1').html(data.message);
$("X10").data('src','lightbulbon.png');
}
else{
$('#section2').html(data.message);
$("X10").data('src','lightbulbon.png');
}
}
});
The HTML
<img src="lightbulboff.png" class="checkStatus" data-x10="C5">
<img src="lightbulboff.png" class="checkStatus" data-x10="C6">
<img src="lightbulboff.png" class="checkStatus" data-x10="C7">
<button class="checkStatus">Device Status Check</button>
<div id="section1"></div>
<div id="section2"></div>
This is driving me crazy!!! every way tried over the last 2 days hit a brick wall would be great if I could crack it!!!
Many thanks!!!

Answer 1

I think you could change a couple of things to make it works, first of all change the success part inside your ajax request:
$("X10").data('src','lightbulbon.png');
this wont lead you anywhere, since you're addressing nothing, insted save you current object in a variable and change it (or use the $(this) context where this is your current image object) :
$(this).attr('src','lightbulbon.png');
another little thing is how you set up the call, while it's not wrong, doing :
$x10Device = $(this).data("x10");
var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&
f=DeviceStatus&d=" + $x10Device ;
could be a little redundant and can lead to easy error while you setup a post request, just rewrite it like an array :
data: {url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab',
f : 'DeviceStatus',
d: $(this).data("x10") }
the whole function should be like :
$("button.checkStatus").click(function(){
$('img.checkStatus').each(function(i, obj) {
var element = $(this);
$.ajax({
type: "POST",
url: 'urlencodeJson.php',
dataType: "json",
data: { url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab',
f : 'DeviceStatus',
d: $(this).data("x10") },
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/json;charset=UTF-8");
},
success: function(data) {
if (data.success == true){
$('#section1').html(data.message);
element.attr('src','lightbulbon.png');
}
else{
$('#section2').html(data.message);
element.attr('src','lightbulbon.png');
}
}
});
});
});