Javascript script to change the source of an image

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**         );   
});

Fosco · Accepted Answer · 2010-10-26 13:24:13Z

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>") . "'";

answered Oct 26, 2010 at 13:24

Fosco

38.6k7 gold badges90 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chris19 Over a year ago

Simple and effective. Thanks, Fosco ... greatly appreciated. Everyday I learn a new thing, I am loving it. Cheers, C.

Chris19 Over a year ago

Tested the code in an older browser IE 7.0.53 and is not working, is causing an error in the javascript, Expected identifier, string or number flexigrid, line 63 character 4, the location pointed out is where the configuration of the table is closing. If I remove the code, no problems.

Fosco Over a year ago

@Chris19 I guess that's a separate issue.. is flexigrid compatible with that version of IE?. As you know this solution didn't involve javascript.

Chris19 Over a year ago

From what I can tell, the entire table content is generated by javascript, so I am guessing the code disrupts the order in that table. I will update the question in one sec.

Chris19 Over a year ago

and the code provided by you gets inserted in the post2.php file.

|

Collectives™ on Stack Overflow

Javascript script to change the source of an image

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related