IMG tag and onclick event

tommycahir · 04-05-2009 2:52pm #1

Hi All

Please be gentle on me if this is a silly question but can somebody see any issues with the below:

I am using php to generate a table and its contents from a DN which are then out putted into a div. The issue is when I output an IMG file with an onclick event it doesn't actually do anything when i try click on it.

The PHP code is

echo "<td><img src='images/cancel.png' id = ". $row['Item_No'] . " onClick = 'javascript:deleterecord(this)'></td>";

This outputs the following HTML code

<td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(this)"></td>

Can anybody see why the onclick event is not being called\working with the img tag?

Regards
Tommy

tricky D · 04-05-2009 3:09pm

iirc you might not be able to apply the event to an img tag. You could try wrapping the img with a link with the event in the a tag, or making it a form or applying a single link imagemap to the img with the event in the area.

Liam Byrne · 04-05-2009 3:14pm

It's a typical newbie-cum-IE-only mistake.

An IMG only triggers an event in IE, not cross-browser.

If you use something like jQuery, then you can achieve it, but not as default onclick.

ocallagh · 04-05-2009 3:18pm

?? Of course not, the onclick event is fine with an iamge.
This works fine for me.

<img src="order-form.php_files/cancel.png" id="72" onclick="deleterecord(this)">

louie · 04-05-2009 4:15pm

i suppose the "deleterecord" call a php file which deletes the record from the DB. Am I right?
Also add some text in front of the img id="img_72", not to create any confusion with the JS code.

Liam Byrne · 04-05-2009 4:23pm

louie wrote: »

i suppose the "deleterecord" call a php file which deletes the record from the DB. Am I right?

No. onclick is JavaScript (client-side), do deleterecord has to be a javascript function.

The only way to call php is if the "deleterecord" function does an ajax call / document.location call, or a form submit.

CuLT · 04-05-2009 6:12pm

I don't think I've ever tried doing it with an image (I have a feeling it'd be bad practice), but it should work according to w3schools.

Supported by the following HTML tags wrote:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

tommycahir · 04-05-2009 6:22pm

been working on debugging this a little bit more and when I copy all the generated source to a html file and call the javascript function using onclick with the javascript function being in the actual html file it works perfectly (in either IE or FF)
however when i have it via generated code as above and the javascript function in another file (which is used earlier to add another record to the DB and row to the table) it doesnt work at all :-(

deleterecord is a javascript function that does an ajax call to update a db record.

louie · 04-05-2009 7:08pm

setup an alert in the javascript function to see if the page actually calls it "onclick"

Is there a live example?

tommycahir · 04-05-2009 7:13pm

I am working on my locl wamp server so unfortunately dont have a live example.

I have reduced the javascript function to a simple alert but that doesnt work when javascript function is in a seperate file so appears that the function is failing to be called. [have checked that correct file is included]

louie · 04-05-2009 7:17pm

did you add some text in front of the id number as mentioned above?

It shouldn't matter if the js is in an external file or not once is included into the page. just make sure the path is right and is not a subdomain setup (permission issues)

tommycahir · 04-05-2009 7:25pm

havent added anything to the number in the ID as was using that to pass a value to the javascript function

tommycahir · 04-05-2009 7:33pm

Oh good god, I am beginning to hate javascript, ajax and php combo!

I have no idea how but it seems to be running ok now! :eek:

Thanks for all your responses and suggestions, your help is always greatly appreciated

Regards
Tommy

Eoin · 04-05-2009 11:56pm

If you haven't already, then install the web developer toolbar for Firefox and/or firebug. I would say they are pretty much essential.

ron_darrell · 05-05-2009 11:21pm

I used to run into a very similar problem when I was debugging AJAX. I'd update the code but nothing would happen. It appears that the browser was caching my AJAX and so when I updated the code the old version was still being used. A simple restart of the browser (or deleting the history/cache/cookies) often sorted it.

The other thing I learned was test the PHP page separately (with no AJAX interaction) first to make sure it's giving you the results you expect before tying it into AJAX. Saves an awful lot of sweat and swearing

RD

Eoin · 05-05-2009 11:37pm

If you have caching problems with an external JS or PHP/.net page, then add a parameter to the querystring that contains a random number or a ticks count when calling it.

e.g. <script src="functions.js?tmr=<%=randomNumberHere or ticks from midnight%>"></script>

That should ensure you're always getting a fresh version. Remember to remove this in production.

IMG tag and onclick event

Comments