Databases
StackOverflow2013
Postsdbo
POauto-generate jquery tabs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POauto-generate jquery tabs
    text
    copied!<p>After trying several options (jQuery UI tabs &amp; jQuery Tools tabs) and not getting the correct results from either one... here I am again.</p> <p>What I want to do:</p> <p>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().</p> <p>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.</p> <p>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?</p> <p>Any thoughts are greatly appreciated.</p> <hr> <p>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...</p> <p>Using this, I get all the 'tabs' stacked vertically, with all the 'panes' underneath that, again stacked vertically.</p> <pre><code>var stateData; $.getJSON("getStateData.php", function(data) { stateData = data; var $theLastGroup = "zzzzz"; var $ulItems = "&lt;ul class='groupTabs'&gt;\n"; var $divItems = ""; $.each(stateData, function(i,jsonData) { if( $theLastGroup != jsonData.groupName ) { $ulItems = $ulItems+"&lt;li&gt;&lt;a href='#"+jsonData.groupName+"'&gt;"+jsonData.groupID+"&lt;/a&gt;&lt;/li&gt;\n"; if( i &gt; 0 ) { $divItems = $divItems+"&lt;/div&gt;\n"; } $divItems = $divItems+"&lt;div id='"+jsonData.groupName+"'&gt;\n"; $theLastGroup = jsonData.groupName; } $divItems = $divItems+"&lt;span sname='"+jsonData.stateName+ "' lat='"+jsonData.centerLat+ "' lon='"+jsonData.centerLon+ "' zom='"+jsonData.zoom+"' &gt;"+jsonData.stateName+"&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;\n"; }); $ulItems = $ulItems+"&lt;/ul&gt;\n"; $divItems = $divItems+"&lt;/div&gt;\n"; $("#tabs").append($ulItems); $("#tabs").append($divItems); $("#tabs").tabs(); }); </code></pre> <hr> <p>05-20-2011 - ANYONE have any more thoughts on this? I was missing the final <code>&lt;/div&gt;</code>, but that did not make a difference....(i added the code above).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload