Darren T. Darren T. - 4 months ago 10
Javascript Question

Change Td Class Value with JS Script

Here my problem using this script to retreive value

function GetTagValues()
{
// Send the request
jQuery.ajax ( { url:"/usr/private/tags.json.shtm", dataType:"json", success:TagValuesReceived, error:TagValuesError, timeout:10000 });
}
function TagValuesReceived(json)
{
// Update value in webpage
document.getElementById("Tank1").innerHTML = json.Tank1;
//document.getElementById("Pump1Status").innerHTML = json.Pump1Status;
//document.getElementById("Pump1Default").innerHTML = json.Pump1Default;
setTimeout("GetTagValues()", 1000);
}

function TagValuesError()
{
}

GetTagValues();


I would like to put the value in the td class value (replace NO VALUE by my new value)

<tr>
<th>
<strong>Flow</strong>
<span class="model">(FL-01011 15°C)</span> :
</th>
<td class="total" id="Tank1">
<input type="text" size="6" value="NO VALUE" />
</td>
<td class="unite">lpm</td>
<td class="today"></td>
</tr>


Right now i'm able to get the value to display, but with innerHTML it's change the way that the value is shown (normally in a box (second value) as the following image)

Box vs innerHTML

Answer

Using jQuery:

$("td#Tank1 tr:only-child").attr("value", value);

where value is your value.

So:

function GetTagValues()
{
    // Send the request
    jQuery.ajax ( { url:"/usr/private/tags.json.shtm", dataType:"json", success:TagValuesReceived, error:TagValuesError, timeout:10000 });
}
function TagValuesReceived(json)
{
    // Update value in webpage
    $("td.total tr:only-child").attr("value", json.Tank1);
    //document.getElementById("Pump1Status").innerHTML = json.Pump1Status;
    //document.getElementById("Pump1Default").innerHTML = json.Pump1Default;
    setTimeout("GetTagValues()", 1000);
} 

Now, when your AJAX succeeds, the value of json.Tank1 will become the value property of the <td> tag.

Comments