Loading Google Visualizations via AJAX in jQueryUI tabs

后端未结

关注

 2  907

南方客

I\'m trying to use jQueryUI tabs, loading the Tabs via AJAX.

The problem I\'m having is with Google Visualizations placed on those tabs -- they don\'t appear when re

相关标签:

2条回答

有刺的猬

2021-01-15 04:00

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.

EDIT

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>

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>

This worked for me.

0 讨论(0)

渐次进展

2021-01-15 04:03

Work For me

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

0 讨论(0)