onclick javascript function does not work with Firefox/IE

Question

I have a problem with my Captcha reload action. It works very well with Chrome but not with Firefox or IE. There is a Captcha and a Button and I want to refresh the Captcha without reloading the entire page. I would be happy if I could get some help with this. head with javascript code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <link href='resources/styles.css' rel='stylesheet' type='text/css' />
        <title>...</title>
        <script language="javascript" type="text/javascript">
            function reloadCaptcha()
            {
                img = document.getElementById('captcha');
                img.src = 'resources/templates/captcha/Captcha.php';
            }
        </script>
    </head>

captcha and refresh button:

<img src="resources/templates/captcha/Captcha.php" id='captcha'>
    <a href="#" onclick='javascript:reloadCaptcha();'>
        <img src="../backend/resources/media/captcha_refresh.png">
    </a>

onclick can ONLY run Javascript. using "javascript:" is redundant. — Diodeus - James MacFarlane, Aug 08 '13 at 16:09
in the console what error are you getting? function reloadCaptcha() undefined???? or you script has not effect?, try include in your script an alert('xxx'); to see it is running — Emilio Gort, Aug 08 '13 at 16:10
While you don't need the `javascript:` part, it should still execute. Perhaps the browser is caching the image since you're not changing the img src to something new. Does it work if you call the function manually from the console? — nullability, Aug 08 '13 at 16:12

score 1 · Accepted Answer · answered Aug 08 '13 at 16:18

1

I suspect the problem might be caching. You can fix this by adding a timestamp to your new img src, like this:

function reloadCaptcha() {
    var img = document.getElementById('captcha'),
        timestamp = new Date().getTime();
    img.src = 'resources/templates/captcha/Captcha.php?' + timestamp;
 }

answered Aug 08 '13 at 16:18

nullability

10,545
3
45
63

Thank you! This helped. The only problem now is, if I spam hit the button, it doesn't refresh, but it should be fine like that. – user2665142 Aug 08 '13 at 16:28
Yes, depending on your browser the timestamp is only updated every 15-60 milliseconds. Unfortunately Javascript's built-in random number generator has the same problem. You can work around this by adding some code to detect duplicates but it probably isn't necessary. – nullability Aug 08 '13 at 16:43

score 0 · Answer 2 · answered Aug 08 '13 at 16:13

0

Your syntax is bad.

Option 1:

<a href="javascript:reloadCaptcha();">

Option 2:

<a href="#" onclick='reloadCaptcha();'>

Option 3: use the EventHandler API.

answered Aug 08 '13 at 16:13

Halcyon

57,230
10
89
128

Never ever use the javascript: protocol in the href - it partially unloads the page and has many other drawbacks – mplungjan Aug 08 '13 at 16:15
The syntax is not at fault here. The `javascript:` part in the event handler will just be ignored. See http://stackoverflow.com/questions/2321469/when-do-i-need-to-specify-the-javascript-protocol – nullability Aug 08 '13 at 16:15
@mplungjan do you have a source for that claim? – Halcyon Aug 08 '13 at 16:16
the href:javascript will certainly NOT be ignored! the onclick="javascript: will – mplungjan Aug 08 '13 at 16:16
are you sure @mplungjan? I prefer the a href=javascript solution. Does not change my url and refreshes just fine. – user2665142 Aug 08 '13 at 16:32
Absolutely. Here is a rundown of what javascript: protocol and label does http://stackoverflow.com/a/10069139/295783 – mplungjan Aug 08 '13 at 16:33
I have just tested I have to admit that is seems to have less impact on the newest Chrome and FX than it used to have. I'll have a look at IE8 and 10 on Windows tomorrow – mplungjan Aug 08 '13 at 16:46

mplungjan · Answer 3 · 2013-08-08T18:55:42.703

0

As well as avoiding caching you need to return false in the onclick

<a href="#" 
onclick='reloadCaptcha(); return false'><img 
src="../backend/resources/media/captcha_refresh.png"></a>

edited Aug 08 '13 at 18:55

answered Aug 08 '13 at 16:14

mplungjan

169,008
28
173
236

Your description of the problem was poor. You need to avoid caching to refresh but also return false to not follow the link – mplungjan Aug 08 '13 at 16:31
Sorry, I didn't have a clue what the problem was. I tried to get out what I had. Thank you anyway. – user2665142 Aug 08 '13 at 16:37

score 0 · Answer 4 · edited May 27 '15 at 17:15

0

I got the same problem on Firefox and Internet Explorer. I used event handler and I solved my problem. Use

evt.preventDefault(); 
return false;

In your javascript functions.

edited May 27 '15 at 17:15

Luís Cruz

14,780
16
68
100

answered May 27 '15 at 16:56

user3882778

1
1

onclick javascript function does not work with Firefox/IE

4 Answers4