通过AJAX在jQueryUI的标签加载谷歌可视化 [英] Loading Google Visualizations via AJAX in jQueryUI tabs
问题描述
我试图使用jQueryUI的标签，通过AJAX加载标签。
I'm trying to use jQueryUI tabs, loading the Tabs via AJAX.
我遇到的问题是与谷歌可视化放在那些标签 - 当通过AJAX检索它们不会出现。
The problem I'm having is with Google Visualizations placed on those tabs -- they don't appear when retrieved via AJAX.
我设置一个简单的例子：
I've setup a simple demonstration:
http://htmlto.com/ui/index.php 是标签页。表一应加载该页面在这里看到： http://htmlto.com/ui/tab1.php
http://htmlto.com/ui/index.php is the tab page. Tab 1 should load the page seen here: http://htmlto.com/ui/tab1.php
不过，事实并非如此。我已经看到了类似的解决方案，这一问题涉及改变的AJAX调用，但，我的Ajax调用jQueryUI的一部分，所以我需要一个解决方案，与他们建立打得很好。
But, it doesn't. I've seen similar solutions to this problem that involve altering the AJAX call, except, my AJAX calls are part of the jQueryUI, so I need a solution that plays well with their setup.
我会加载很多不同的，动态生成可视化效果;数据填充需要发生在选项卡上，而不是主页的页脚，否则加载时间会站不住脚。
I'll be loading many different, dynamically generated visualizations; the data populating needs to take place on the tab, rather than the footer of the main page, otherwise the load time will be untenable.
我应该怎么办？
推荐答案
您的网页，将被用作标签不应该有HTML，头部或身体标记。我是pretty的肯定，他们应该只存在原始的HTML。
Your pages that will be used as tabs should not have HTML, HEAD or BODY tags. I'm pretty sure they should just exist as raw HTML.
修改
好了，这里的的index.php HEAD部分应该是什么样子（页面的其余部分保持不变）：
Okay, here's what the index.php HEAD section should look like (the rest of the page remains the same):
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="/ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/ui/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/ui/development-bundle/ui/jquery.ui.core.js"></script>
<link type="text/css" href="/ui/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs({
ajaxOptions: {
error: function (xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
}
}
});
});
google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });
</script>
<title></title>
</head>
和这里是 lazarus.php 应该是这样的：
And here's what lazarus.php should look like:
<script type='text/javascript'>
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1, 1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1, 2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1, 3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1, 4), 75284, undefined, undefined, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
[new Date(2008, 1, 5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1, 6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, { displayAnnotations: true });
</script>
<div id='chart_div' style='width: 700px; height: 240px;'></div>
这为我工作。
这篇关于通过AJAX在jQueryUI的标签加载谷歌可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
