こんにちは私のスクリプトでは、ajax を介してページを呼び出し、そのページのコンテンツを dom に挿入しようとしています。ターゲット ページには次のコードがあります。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-1',
defaultSeriesType: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</head>
<div id="chart-container-1" style="width: 100%; height: 400px"></div>
ハイチャートスクリプトからのものです。ajax 呼び出しを行うと、空の div が取得されます。それにもかかわらず、ajax 呼び出しなしでページを実行すると、問題なく実行されます。
編集:私が要求しているページにはjqueryスクリプトが含まれていますが、jqueryスクリプトを使用して呼び出していません。代わりにこれらの関数を使用しています：
function callAHAH(url, pageElement, callMessage, errorMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responseAHAH(pageElement, callMessage, errorMessage);};
req.open("GET",url,true);
req.send(null);
}
function responseAHAH(pageElement, callMessage, errorMessage) {
var output = '';
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
} else {
document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;
}
}
}