auto-generate jquery tabs

After trying several options (jQuery UI tabs & jQuery Tools tabs) and not getting the correct results from either one... here I am again.

What I want to do:

Dynamically generate the entire tab structure on page load. Data to be used to build the tabs is in a mySql database, being retrieved via getJSON().

I tend to get ALL my data returned and it appears to be placed in the correct DOM location (ie. inside my 'tabs' DIV), but when I call ("#tabs").tabs(); function, the tabs do not show up correctly.

I can provide code, but would like to see what other suggest. Anyone encounter an issue with dynamically generating the entire tab structure? Anyone get it to work correctly?

Any thoughts are greatly appreciated.

Ok, here is the code I am using to create the tabs, I have posted this before, but as I stated in the original, I want to see if anyone else has done a dynamic creation of the entire tab structure...

Using this, I get all the 'tabs' stacked vertically, with all the 'panes' underneath that, again stacked vertically.

var stateData;

$.getJSON("getStateData.php", function(data) {
    stateData = data;
    var $theLastGroup = "zzzzz";
    var $ulItems = "<ul class='groupTabs'>\n";
    var $divItems = "";

    $.each(stateData, function(i,jsonData) {

        if( $theLastGroup != jsonData.groupName )
        {
            $ulItems = $ulItems+"<li><a href='#"+jsonData.groupName+"'>"+jsonData.grou开发者_StackOverflow中文版pID+"</a></li>\n";

            if( i > 0 ) 
            {
                $divItems = $divItems+"</div>\n";           
            }
            $divItems = $divItems+"<div id='"+jsonData.groupName+"'>\n";

            $theLastGroup = jsonData.groupName;
        }

        $divItems = $divItems+"<span sname='"+jsonData.stateName+
            "' lat='"+jsonData.centerLat+
            "' lon='"+jsonData.centerLon+
            "' zom='"+jsonData.zoom+"' >"+jsonData.stateName+"</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";

    });
    $ulItems = $ulItems+"</ul>\n";
    $divItems = $divItems+"</div>\n";


    $("#tabs").append($ulItems);
    $("#tabs").append($divItems);

    $("#tabs").tabs();
});

05-20-2011 - ANYONE have any more thoughts on this? I was missing the final </div>, but that did not make a difference....(i added the code above).

if i'm not mistaken, your problem is the alignment of the tabs generated by your code.

and if thats the real problem. try to code a simple unordered list css tags for the class that you have used in your code.

like this..

ul.groupTabs li{float:left; padding 10px; display:block;}

hope this help you...

~gio