Question

我正在尝试使用jQueryUI标签，通过AJAX加载标签。

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

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

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

但是，事实并非如此。我已经看到了这个涉及改变AJAX调用的问题的类似解决方案，除了我的AJAX调用是jQueryUI的一部分，所以我需要一个能够很好地适应它们的设置的解决方案。

我将加载许多不同的，动态生成的可视化;填充数据需要在选项卡上进行，而不是主页面的页脚，否则加载时间将无法实现。

我该怎么办？

Answer 1

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

修改

好的，这是index.php HEAD部分应该是什么样子（页面的其余部分保持不变）：

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

这对我有用。

Answer 2

为我工作

<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {


    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
    ]);

    var data1 = google.visualization.arrayToDataTable([
        ['Tasks', 'Hours per Day'],
        ['Works',     12],
        ['Eats',      20],
        ['Commutes',  21],
        ['Watch TVs', 12],
        ['Sleeps',    17]
    ]);
    var options = {'title':'Score Chart',
        'width':600,
        'height':300};



    $(".tabs a[title='content_2']").click()
    $(".tabs a[title='content_1']").click()

    var chart = new      google.visualization.BarChart(document.getElementById('chart'));


    chart.draw(data, options);


    var chart1= new      google.visualization.BarChart(document.getElementById('chart1'));


    chart1.draw(data1, options);

}





// When the document loads do everything inside here ...
$(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();

    });

});
</script>


<div id="tabbed_box_1" class="tabbed_box">
<br />
<div class="tabbed_area">
    <ul class="tabs">
        <li><a href="#" title="content_1" class="tab active">Tab1</a></li>
        <li><a href="#" title="content_2" class="tab">Tab2</a></li>
        <li><a href="#" title="content_3" class="tab">Tab3</a></li>
    </ul>
    <div id="content_1" class="content">
        <div id="chart"></div>
    </div>
    <div id="content_2" class="content">
        <div id="chart1"></div>
    </div>
    <div id="content_3" class="content">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
    </div>
</div>

在jQueryUI选项卡中通过AJAX加载Google Visualizations

2 个答案: