私のプロジェクト構造には、テンプレートをレンダリングする必要がある単純な index.gsp が含まれています。テンプレート自体には、このテンプレートをレンダリングするときにグラフを描画する必要があるいくつかの div があります。index.gsp の任意の div で以下のスクリプトを使用すると、インデックス ビューとチャートが適切にレンダリングされます。しかし、テンプレートで同じスクリプトを使用すると、空白のページがレンダリングされ、以下の JavaScript エラーが表示されます。
テンプレートのレンダリングは formremote によってトリガーされます。
<g:formRemote name="myForm" on404="alert('not
found!')" update="content" url="[controller: 'charts', action:'generateChart']">
エラー:
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
脚本:
<div id="myID">
<script>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawIt);
function drawIt(){
console.log("B");
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['Berlin', 2761477],
['Freising', 1324110],
['Muenster', 959574],
['Muenchen', 907563],
['Neufahrn', 655875],
['Hof', 607906],
['Freiburg', 380181],
['Stuttgart', 371282],
['Kiel', 67370],
['Magdeburg', 52192],
['Erfurt', 38262]
]);
var options = {
height: 500,
width: 700,
region: 'DE',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
console.log("D");
var chart = new google.visualization.GeoChart('myID');
chart.draw(data, options);
}
</script>
</div>