在jQueryUI选项卡中通过AJAX加载Google可视化

小编典典

在jQueryUI选项卡中通过AJAX加载Google可视化

ajax

我试图使用jQueryUI选项卡，通过AJAX加载选项卡。

我遇到的问题是放在这些标签上的Google可视化文件-通过AJAX检索时它们不会出现。

我设置了一个简单的演示：

标签页为 http://htmlto.com/ui/index.php。标签1会加载此处显示的页面：http: //htmlto.com/ui/tab1.php

但是，事实并非如此。我已经看到了涉及解决此问题的类似解决方案，其中涉及更改AJAX调用，但我的AJAX调用是jQueryUI的一部分，因此，我需要一个能够很好地配合其设置的解决方案。

我将加载许多不同的动态生成的可视化文件；数据的填充需要在选项卡上进行，而不是在首页的页脚中进行，否则加载时间将无法维持。

我该怎么办？

阅读 288

2020-07-26

共1个答案

小编典典

您将用作标签的页面不应具有HTML，HEAD或BODY标记。我很确定它们应该只作为原始HTML存在。

编辑

好的，这是index.phpHEAD部分的外观（页面的其余部分保持不变）：

<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应该是这样的：

<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>

这对我有用。

2020-07-26