Home/ Questions/Q 961803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T01:24:11+00:00

I’m trying to use jQueryUI tabs, loading the Tabs via AJAX. The problem I’m

  • 0

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 retrieved via AJAX.

I’ve setup a simple demonstration:

http://htmlto.com/ui/index.php is the tab page. Tab 1 should load the page seen here: http://htmlto.com/ui/tab1.php

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.

What should I do?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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