JQuery.load() page containingJavaScript

Question

I have a html page which contains the some javascript to generate a chart from Google API. WHen I access the page directly, it works as expected, showing the chart.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
   //// code to generate chart
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}
</script>
<div id="chart_div">
   Chart Div
</div>

I want to load this chart into a on another page. I tried using JQuery's $.get and $.load, but neither are working. IF I add some text to the page and call get/load i can see the text but not the chart - it seems the Javascript is not executing.

I added alert('msg') and saw that the google.load got called, but no other JS was being called.

From the other page where I want include the chart I have the following JS:

$(document).ready(function () {
    $('#test').load('chart?param=1', function () {
        alert('Load was performed.');
    });
});

but the 'load was performed' never gets hit.

There are syntax errors in the code you have provided. A `}` for no reason in the first part and no `});` to close document ready. — Popnoodles, Jan 05 '13 at 19:42
Sorry misssed the brackets when copy / pasting. Looks like an error on google.load('visualization', '1.0', { 'packages': ['corechart'] }); — Steve, Jan 05 '13 at 20:14
ok. So looks like `https://www.google.com/jsapi` is not being loaded. — Popnoodles, Jan 05 '13 at 20:18
I added to the page I want to load the Div in which eliminates the google.load error, but now I get an error on JQuery SCRIPT5: Access is denied. — Steve, Jan 05 '13 at 20:22
What version of jQuery? This should have been solved in 1.8+ — Popnoodles, Jan 05 '13 at 20:24
Ok this has evolved into an different question now for which there may already be answers http://stackoverflow.com/questions/5087549/access-denied-to-jquery-script-on-ie http://stackoverflow.com/questions/12232475/script5-access-denied-on-ie9-due-to-jquery-min-cdn-file-in-wordpress — Popnoodles, Jan 05 '13 at 20:27

score 0 · Answer 1 · answered Jan 05 '13 at 20:23

"SCRIPT5009: 'google' is undefined"

I suspect that this <script type="text/javascript" src="https://www.google.com/jsapi"></script> isn't working when you .load() that block of code. Since jQuery is already running try this

<!-- get rid of this <script type="text/javascript" src="https://www.google.com/jsapi" -->
<script type="text/javascript">
// does not need $(function()) unless you're running this on its own
// when loading this in using $.load() it's already ready.

$.getScript('https://www.google.com/jsapi', function(){
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);
});
function drawChart() {
   //// code to generate chart
   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}
</script>

JQuery.load() page containingJavaScript

1 Answers1