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.

Answer 1

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

});

Answer 2

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.