包含JavaScript的JQuery.load（）頁面

Question

我有一個html頁面，其中包含一些可從Google API生成圖表的JavaScript。 如果我直接訪問該頁面，它將按預期工作，並顯示圖表。

<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>

我想將此圖表加載到另一頁上的。 我嘗試使用JQuery的$ .get和$ .load，但都無法正常工作。 如果我在頁面上添加了一些文本並調用get / load，我可以看到文本，但看不到圖表-似乎Javascript沒有執行。

我添加了alert('msg')並看到google.load被調用，但是沒有其他JS被調用。

在要包含圖表的其他頁面上，我有以下JS：

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

但是“負載已執行”從未受到打擊。

Answer 1

“ SCRIPT5009：'google'未定義”

我懷疑當您.load（）該代碼塊時，此<script type="text/javascript" src="https://www.google.com/jsapi"></script>無法正常工作。 由於jQuery已經在運行，請嘗試以下操作

<!-- 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>