Simple JavaScript / jQuery not working

Question

I've probably missed something big, but I've been trying for hours...

So to get users of IE 8 and below to install Chrome Frame I tried the GCF Install JS files provided but I'd prefer my own implementation - the GCFInstall JS will let the popup only open once per session, even if invoked by a button the second time. The only solution I've found doesn't let you close it if you open it the second time.

So here's the code I put on my pages:

HTML:

<!--[if lt IE 9]><script type="text/javascript" src="/resources/js/getgcf.js"></script>
<div style="border:1px solid black; padding: 3px;"><img src="http://cdn.dustball.com/information.png" alt="info"> You appear to be using an older version of Internet Explorer. This website relies on technology not supported by Internet Explorer. To improve your experience (and fix layout errors):
<br><button id="gcfdl">Activate Google Chrome Frame</button><br>You won't notice anything different in the way you use the internet, except that most websites will look better.</div><![endif]-->

getgcf.js:

$("#gcfdl").click(function(){
    var wants_normal_installation = confirm("You will now be taken to google.com/chromeframe where Google Chrome Frame will be activated. Please wait about 10 seconds after clicking Accept and Install, and you will automatically be taken back to this page. Press OK for normal installation (recommended), or Cancel for single-user installation (use if you don't have administrator rights on your computer):");
    if(wants_normal_installation){
        window.location("http://www.google.com/chromeframe?redirect=true");
    }
    else{
        window.location("http://www.google.com/chromeframe?user=true&redirect=true");
    }
});

Yes - it's that simple. jQuery normally works perfectly :(

IE does show "Errors on page" but when I click it the message shows a confusing error I can't work out what it means.

I put the code into Chrome and it gave another console message I can't get my head around...

Any help would be appreciated. Thanks.

@doniyor oops seems like it's not coming up anymore on IE - it only came up when I had the script in the HTML (``), rather than saved externally. Chrome's error: `Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception 1 undefined` — , Jul 15 '12 at 00:01
It's working fine here: [http://jsfiddle.net/HFdk6/](http://jsfiddle.net/HFdk6/) can you help us reproduce your issue? — Martin, Jul 15 '12 at 00:05
@MartinAmps Interesting... the website is http://www.duncannz.com if you want to have a look — , Jul 15 '12 at 00:07
@duncan12 i'm not getting any errors there either, but I don't have IE to test right now I'm afraid.. I will check tomorrow on IE if you haven't solved it by then. — Martin, Jul 15 '12 at 00:12

score 2 · Accepted Answer · answered Jul 15 '12 at 00:13

2

Wrap your code in a document ready event...

$(document).ready(function () {

    $("#gcfdl").click(function(){
        var wants_normal_installation = confirm("You will now be taken to google.com/chromeframe where Google Chrome Frame will be activated. Please wait about 10 seconds after clicking Accept and Install, and you will automatically be taken back to this page. Press OK for normal installation (recommended), or Cancel for single-user installation (use if you don't have administrator rights on your computer):");
        if(wants_normal_installation){
            window.location("http://www.google.com/chromeframe?redirect=true");
        }
        else{
            window.location("http://www.google.com/chromeframe?user=true&redirect=true");
        }
    });

});

answered Jul 15 '12 at 00:13

Split Your Infinity

4,159
1
21
19

Thanks! I thought that document ready was only useful for things you need to run on startup and that by the time someone clicks the button the document must have already been ready, so it wasn't needed. But obviously I was misled. – Jul 15 '12 at 00:19
1

And BTW I had to change `window.location` to `window.location.replace` to get the second part to work. – Jul 15 '12 at 00:20
Could someone please explain why I'm wrong (I thought that since the document would be ready by the time someone clicks the button, the doument ready thing wasn't needed here) – Jul 15 '12 at 19:41
1

At the time the jQuery function $("#gcfdl") runs it tries to find it and bind an click event handler. If the element can't be found the click handler will not be attached. You can use the jQuery function delegate (http://api.jquery.com/delegate), but in your case I recommend using document ready anyway. – Split Your Infinity Jul 15 '12 at 21:36

score 0 · Answer 2 · 2012-07-15T01:21:33.023

I've changed the code around, here's my final version. Tested and works in IE8, so no reason it shouldn't work in IE7 etc. It puts the page in an iframe so users don't leave the site. Feel free to use it on your site. (make sure you have jQuery somewhere on the page before this)

<!--[if lt IE 9]><script type="text/javascript" src="/resources/js/getgcf.js"></script>
<div style="border:1px solid black; padding: 3px;"><img src="http://cdn.dustball.com/information.png" alt="info"> You appear to be using an older version of Internet Explorer. This website relies on technology not supported by Internet Explorer. To improve your experience (and fix layout errors):
<br><button id="gcfdl">Activate Google Chrome Frame</button><span id="gcfdl2"></span><div id="gcfiframe"></div><br>You won't notice anything different in the way you use the internet, except that most websites will look better.</div><![endif]-->

put this as /resources/js/getgcf.js:

$(document).ready(function(){
    $("#gcfdl").click(function(){
        var wants_normal_installation = confirm("Press OK for normal installation (recommended), or Cancel for single-user installation (use if you don't have administrator rights on your computer):");
        if(wants_normal_installation){
            $("#gcfdl2").html("&nbsp;<b>When you see that the installation is complete <a href=''>click here</a></b>");
            $("#gcfiframe").html("<iframe height=400 width='100%' src='http://www.google.com/chromeframe'></iframe>");
        }
        else{
            $("#gcfdl2").html("&nbsp;<b>When you see that the installation is complete <a href=''>click here</a></b>");
            $("#gcfiframe").html("<iframe height=400 width='100%' src='http://www.google.com/chromeframe?user=true'></iframe>");
        }
    });
});

Change src='http://www.google.com/chromeframe' to src='http://www.google.com/chromeframe/eula.html' to skip the first page and go straight to the EULA.

Simple JavaScript / jQuery not working

2 Answers2