Javascript script to change the source of an image - php

Question

I am using flexigrid for one of my projects and I need to come up with a way to change the image source depending on the value of one of the cells. For people who are used to flexigrid, I have the following code:
$json .= ",'".addslashes("<span><img src='' id='flag' />" . $row['availability']. "</span>")."'";
and my javascript that I've come up with , looks like this:
<script type="text/javascript">
var available = "<?php echo '$row[availability]' ?>";
if (available == 0) {
document.getElementById('flag').src="images/flag_red.png";
}
elseif (available == 1) {
document.getElementById('flag').src="images/flag_green.png";
}
else {
document.getElementById('flag').src="images/flag_orange.png";
}
I am not sure where I need to insert this function and how to trigger it. Any help will be greatly appreciated.
Regards,
Cristian.
LE: The code where the problem is being reported:
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
{display: 'URL', name : 'url', width : 450, sortable : false, align: 'left'},
{display: 'File Name', name : 'filename', width : 270, sortable : true, align: 'left'},
{display: 'Availability', name : 'availability', width : 50, sortable : true, align: 'center'},
{display: 'State', name : 'state', width : 40, sortable : true, align: 'center'},
{display: 'Total Size', name : 'totalsize', width : 90, sortable : false, align: 'center'},
{display: 'Current Size', name : 'currentsize', width : 90, sortable : false, align: 'center'},
{display: 'Procent', name : 'procent', width : 40, sortable : true, align: 'center'},
{display: 'Log', width : 20, sortable : false, align: 'center'},
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true},
{name: 'Select All', bclass : 'selectall', onpress : test},
{name: 'DeSelect All', bclass : 'deselectall', onpress : test},
{separator: true}
],
searchitems : [
{display: 'URL', name : 'url'},
{display: 'Filename', name : 'filename', isdefault: true}
],
sortname: "state",
sortorder: "asc",
usepager: true,
title: '',
useRp: false,
rp: 5,
showTableToggleBtn: true,
} ----- **IE says there is a problem here** );
});

Answer 1

You shouldn't use javascript for this, you can do it directly in your existing PHP line.
$json .= ",'" .
addslashes("<span><img src='" .
($row['availability'] == 0 ? "images/flag_red.png" :
($row['availability'] == 1 ? "images/flag_green.png" :
"images/flag_orange.png")
) .
"' id='flag' />" . $row['availability'] . "</span>") . "'";