Why does google.load cause my page to go blank?

Asked 1/3, 2012 at 16:9 Answered 14/7, 2015 at 19:30

Solved javascript google-visualization google-loader

103

Well, this looks strange but I'm not able to find a solution.

Why in the world does this fiddle http://jsfiddle.net/carlesso/PKkFf/ show the page content and, then when google.load occurs, the page goes blank?

It works well if the google.load is done immediately, but having it delayed does not work at all.

Here the page source for the lazier (or smarter) of you:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ciao</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>
    <h1>Test</h1>
    <div id="quicivanno">
      <p>ciao</p>
    </div>
  </body>
  <script type="text/javascript">
       setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 2000);
  </script>
</html>

Cinelli answered 1/3, 2012 at 16:9 Comment(2)

nice question, here's a link: friendlybit.com/js/lazy-loading-asyncronous-javascript (in other words: no clue yet) – Sarsen 1/3, 2012 at 16:23

i noticed, that document.write('anything') will clear the previous html as well, maybe document is out of whack in the context of settimeout? – Sarsen 1/3, 2012 at 16:29

110

Looks like google.load is adding the script to the page using a document.write(), which if used after the page loads, wipes out the html.

This explains more in-depth: http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/e07c2606498094e6

Using one of the ideas, you could use a callback for the load to force it use append rather than doc.write:

setTimeout(function(){google.load('visualization', '1', {'callback':'alert("2 sec wait")', 'packages':['corechart']})}, 2000);

This demonstrates the 2 second wait with the delayed alert window

Guardi answered 1/3, 2012 at 16:49 Comment(4)

I dont want alert window to be displayed is there any work arround to do that? – Shemeka 23/8, 2013 at 7:12

The alert was just an example snippet of code. It can be anything. – Guardi 22/10, 2013 at 13:53

This is great. The only thing I changed to work as I expected was to call the drawChart function instead of the alert function. – Inlier 18/11, 2013 at 12:31

Just adding an empty callback param fixed it for me. – Mclaurin 27/10, 2015 at 4:51

You just have to define a callback, and it will not clear the page (maybe the older versions of google.load() did, but apparently the new ones do not if used with callback). Here a simplified example when I'm loading the "google.charts" lib:

if(google) {
    google.load('visualization', '1.0', {
        packages: ['corechart'],
        callback: function() {
            // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
        }
    } )
}

When doing it whitout callback(), I still get the blank page too - but with callback, it's fixed for me.

Ignitron answered 27/7, 2014 at 11:4 Comment(0)

Note: The following is good for avoiding a time delay - it's just in time. The example can be used generally by all scripts (needing it), but was particularly used with Greasemonkey. It also uses the Google chart API as an example, but this solution goes beyond to other Google APIs and can be used anywhere you need to wait for a script to load.

Using google.load with a callback did not solve the issue when using Greasemonkey to add a Google chart. In the process (Greasemonkey injected into page), the www.google.com/jsapi script node is added. After adding this element for Google's jsapi javascript, the injected (or page) script is ready to use the the google.load command (which needs to be loaded in the added node), but this jsapi script did not load yet. Setting the a timeout worked, but the timeout was merely a workaround for the Google jsapi script load's timing race with the injected/page script. Moving around where a script executes the google.load (and possibly google.setOnLoadCallback) can affect the timing race situation. The following proffers a solution that waits for the google script element to load before calling google.load. Here is an example:

// ********* INJECTED SCRIPT *********//
// add element
var gscript = document.createElement('script');
gscript.setAttribute("type", "application/javascript");
gscript.setAttribute("id", "XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

// event listener setup     
gscript.addEventListener("load",    
    function changeCB(params) {
        gscript.removeEventListener("load", changeCB);
        google.load("visualization", "1", {packages:["corechart"], "callback": 
            function drawChart() {
                var data;
                // set the durationChart data (not in example)
                data = new google.visualization.arrayToDataTable(durationChart);

                var options = {
                    title:"Chart Title",
                    legend: {position:"none"},
                    backgroundColor:"white",
                    colors:["white","Blue"],
                    width: window.innerWidth || document.body.clientWidth,
                    height: window.innerHeight || document.body.clientHeight,
                    vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}},
                    hAxis: {title: "Days Since First Instance"},
                    height: ((cnt > 5)? cnt * 50 : 300),
                    isStacked: true
                }; // options


                // put chart into your div element
                var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
                chart.draw(data, options);
            } // drawChart function
        }); //packages within google.load & google load
    } // callback changeCB
);

// can use SSL as "https://www.google.com/jsapi";
gscript.src = "http://www.google.com/jsapi";

Seamy answered 10/2, 2014 at 0:17 Comment(0)

You don't need to set timeout. There is another way:

$.getScript("https://www.google.com/jsapi", function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
});

Explanation:

 function () {
     google.load('visualization', '1', { 'callback': 'alert()', 'packages': ['corechart'] });
 }

will be executed after successful load JSAPI script, then alert() will be executed after successful google.load()

Waffle answered 3/11, 2014 at 9:57 Comment(0)

I encountered this problem when attempting to move a google.load(…) inside a jQuery $(document).ready(…) wrapper. Moving the google.load(…) back outside of the ready function so it executes immediately solved the problem.

For example, this doesn't work:

$(document).ready(function() {
    google.load('visualization', '1', {packages: ['corechart']});
});

But this does:

google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
    // …
});

Araucaria answered 14/7, 2015 at 19:30 Comment(0)

Recommended topics

Hot tags