Loading Google Chart Api using Ajax in an html page

Question

I am using Ajax code to load an html page

eg:

$.ajax({ url: 'Context.html', dataType: 'html', timeout: 500, success: function(html) { $("div#mainbody").html(html); } }); 

The Context.html I upload it to another html page, for example: Home.html

But I am creating pie charts using google API in Context.html

and the code for creating the ie pie chart in Context.html is

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Count'], ['2005', 70], ['2006', 80], ['2007', 140], ['2008', 220], ['2009', 290], ['2010', 400], ['2011', 500] ]); var options = { title: 'Head Count-(Apple Year)', colors:['#129212'] }; var chart = new google.visualization.ColumnChart(document.getElementById('jsf_headcount_bargraph')); chart.draw(data, options); } </script> 

When I load Context.html in the Home.html page, I cannot find the pie chart that is in Context.html after loading in Home.html

I tried to give ALERT (""); in the script where I wrote the code for the pie chart. I was getting a warning message, so Ajax is executing javascript, but I am not getting a pie chart, which is the same script. So I got hooked on the boot pie chart on the Home.html page

Answer 1

If you create Context.html as

 <script> var j = 20; alert(); </script> 

Then I get a warning (using $ .ajax ({success: function () {}}), etc.).

[Example]

 function execAjax() { $.ajax( { url: 'index2.html', success: function( html ) { $("#content").html( html ); checkJSvalue(); }, error: function() { alert( "Error" ); } }); } function checkJSvalue() { alert( j ); } 

HTML example (index2.html)

 <div> content of index2.html </div> <script> var j = 20; alert(); </script> 

What I was trying to do was put the code directly in 'home.html' and I already got errors. In any case, you must change the order of use and the declaration of the drawchart function.

 // Bad // google.setOnLoadCallback(drawChart); // function drawChart() {} // Good function drawChart() {} google.setOnLoadCallback(drawChart); 

Other than that, I already got this error from google.jsapi.js (copied locally)

 Uncaught Error: Container is not defined format+nl,default,corechart.I.js:841 

So something went wrong, which is not part of the actual question, and it decreased, etc., so I won’t go there.

Hope this was helpful :)

Answer 2

Everything works fine if I replace the code

 google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); 

In line

 google.load('visualization', '1.0', {'packages':['corechart'], "callback": drawChart});