Loading javascript after ajaxComplete

Question

I am trying to add a Google chart via AJAX but in Firebug I am getting:

ReferenceError: google is not defined

The AJAX that I am sending looks like this:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);

    etc etc...

</script>

I'm assuming that the first script is not loading. How would I fix this? I've tried loading after ajaxComplete but I can't get it to work.

What happens when you wrap your google functions in a DOM ready function? — Roy M J, Jul 13 '15 at 11:56
But I am sending these 2 scripts to the page via AJAX (after the page loads). Doesn't that mean that the DOM is already ready? — user537137, Jul 13 '15 at 11:59
@user537137 So if you are loading this script after document is parsed, this script is loaded asynchronously. So set logic inside onload handler of script including google jsapi. Now i'm wondering, how do you include these scripts on page? And beware, if google jsapi is using any window onload event to be inititlized, you cannot use this way to load goggle script — A. Wolff, Jul 13 '15 at 12:01
`I'm assuming that the first script is not loading` How that??? Share relevant code in question regarding how do you append these scripts on page — A. Wolff, Jul 13 '15 at 12:07
These 2 scripts are the 'HTML' that I am sending as the AJAX response back to the page. I know this is wrong but have no idea what the right way is (and perhaps even the right terminology) — user537137, Jul 13 '15 at 12:07
@A.Wolff: scritps can be loaded dynamically via ajax mthod `$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) { console.log( data ); // Data returned console.log( textStatus ); // Success console.log( jqxhr.status ); // 200 console.log( "Load was performed." ); });` — dreamweiver, Jul 13 '15 at 12:07
@dreamweiver Ya sure and i guess however OP was including his scripts, using relevant `$.getScript()` method and using relevant success callback would fix it: `$.getScript( "https://www.google.com/jsapi", function(){google.load("visualization", "1", {packages:["corechart"]});//etc..});` Now like i said, if this google script (which i don't know and too lazy to check source) is using some DOM event to be initialized, it could not work. e.g, window onload isn't fired after window is already loaded. I said that because AFAIK some google scripts are using it — A. Wolff, Jul 13 '15 at 12:10

score 1 · Answer 1 · edited May 23 '17 at 12:21

If you want to wait untill your library load, you can periodically check if it is loaded and when you detect it, you can execute your code. I am basign my solution on this answer.

Add a Javascript function to check:

function whenAvailable(name, callback) {
    var interval = 10; // ms
    window.setTimeout(function() {
        if (window[name]) {
            callback(window[name]);
        } else {
            window.setTimeout(arguments.callee, interval);
        }
    }, interval);
}

And then add a code that checks if you have your google loaded and run the code from the inside once it loads

whenAvailable("google", function(t) {
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);

    etc etc...
});

You can customise your interval. This is a useful pattern to know.

Loading javascript after ajaxComplete

1 Answers1