Не удалось загрузить Google jsapi в диалоге Jquery - PullRequest
Новая
       29

Не удалось загрузить Google jsapi в диалоге Jquery

3 голосов
/ 05 августа 2011

Я пытаюсь показать диаграмму из API визуализации Google в диалоговом окне jQuery, которое загружает контент с другой страницы, но я получаю сообщение об ошибке JavaScript, в котором говорится, что «Google не определен» при попытке загрузки диаграммы. В примере есть 2 простых страницы. «Mainpage.htm», в котором размещается диалоговое окно, и «chartpage.htm», в котором размещается диаграмма, которая динамически загружается в диалоговое окно jQuery. Это mainpage.htm: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<title></title>
<script type="text/javascript">
function openchart() {
    w = $(window).width() - 100;
    h = $(window).height() - 100;
    var url = "chartpage.htm";
    $("#chartDlg").load(url).dialog({ modal: true, width: w, height: h, title: 'MyChart', position: 'center' });
    $("#chartDlg").dialog('open');
}
</script>
</head>
<body>
<a href="javascript: openchart();">Show Chart</a>
<div style="display:none" id="chartDlg"></div>
</body>
</html>

А это "chartpage.htm" 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'NYSE');
        data.addColumn('number', 'MIB');
        data.addColumn('number', 'CAC40');
        data.addRows([
          [new Date(2008, 1, 1), 30040, 18550, 40645],
          [new Date(2008, 2, 1), 30300, 18550, 40645],
          [new Date(2008, 3, 1), 32000, 18450, 47645],
          [new Date(2008, 4, 1), 31000, 18650, 45645],
          [new Date(2008, 5, 1), 35000, 18850, 44645],
          [new Date(2008, 6, 1), 30600, 18350, 47645],
          [new Date(2008, 7, 1), 34000, 18450, 48645],
          [new Date(2008, 8, 1), 30500, 18450, 44645],
          [new Date(2008, 9, 1), 30500, 18550, 45645],
          [new Date(2008, 10, 1), 30400, 18950, 46645],
          [new Date(2008, 11, 1), 34000, 18950, 47645],
          [new Date(2008, 12, 1), 30500, 18400, 45645],
          [new Date(2009, 1, 1), 34500, 18350, 44645],
          [new Date(2009, 2, 1), 30460, 18250, 40645],
        ]);
        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, { displayAnnotations: true, fill: 20 });
    }
</script>
</head>
<body>
    <div id="chart_div" style="width: 800px; height: 600px;">
</div>
</body>
</html>

chartpage.htm открывается как отдельная страница, он отлично работает, он не работает только при загрузке в диалог Mainpage.htm.

Похоже, что Google jsapi вообще не загружается.

Есть идеи?

Спасибо

Эдик

1 Ответ

3 голосов
/ 05 августа 2011

Несколько вещей, чтобы попробовать.

Загрузите chartpage.htm в iframe в диалоговом окне (сам не пробовал, но стоит попробовать): 

<div style="display:none" id="chartDlg"><iframe src="chartpage.htm"></iframe></div>

и измените функцию на: 

function openchart() {
w = $(window).width() - 100;
h = $(window).height() - 100;
$("#chartDlg").dialog({ modal: true, width: w, height: h, title: 'MyChart', position: 'center' });
$("#chartDlg").dialog('open');
}

ИЛИ

Добавьте Google gavascript на mainpage.htm: 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
...