Google jsapi 无法在 Jquery 对话框中加载

发布于 2024-11-28 03:36:55 字数 3318 浏览 2 评论 0原文

我试图将来自 google 可视化 api 的图表显示到 jQuery 对话框中,该对话框从另一个页面加载内容,但在尝试加载图表时收到一条 javascript 错误,提示“google 未定义”。 该示例有 2 个简单页面。托管对话框的“mainpage.htm”和托管动态加载到 jQuery 对话框中的图表的“chartpage.htm”。 这是“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” 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>

作为独立页面打开,它工作完美,只有在加载到 Mainpage.htm 对话框中时才会失败。

看起来 google jsapi 根本没有加载。

有什么想法吗?

谢谢艾迪卡

I'm trying to show a Chart from google visualization api into a jQuery dialog that load the content from another page, but I receive a javascript error that said 'google is not defined' when try to load the chart.
The example has 2 simple pages. The 'mainpage.htm' that host the dialog and the 'chartpage.htm' that host the chart that is loaded dynamically into the jQuery dialog.
This is the '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>

And this is the '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>

The chartpage.htm opened as standalone page it work perfect, it fails only when is loaded into the Mainpage.htm dialog.

It looks that the google jsapi is not loaded at all.

Any Ideas?

Thanks

Edika

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

上课铃就是安魂曲 2024-12-05 03:36:55

有几件事值得尝试。

在对话框的 iframe 中加载 Chartpage.htm(我自己没有尝试过,但值得一试):

<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 javascript 添加到 mainpage.htm:

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

Couple of things to try.

Load chartpage.htm in an iframe in the dialog (haven't tried this myself but worth a shot):

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

and change the function to:

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');
}

OR

Add the google javascript to the mainpage.htm:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文