CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Umesh Kalaspurkar
Umesh Kalaspurkar

Reputation: 23

jquery UI Nested Tabs creation dynamically?

I am trying to create a jquery UI nested tab dynamically on a button click but I can only get the Main tab to work but the Nested doesn't show properly. (Note: I dont want to define the nested divs before but create this divs dynamically) anyone can help?

JSFiddle Link: http://jsfiddle.net/ukalaspurkar/TqF9F/

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
    </ul>
</div>

    <input type='button' id='addTab' value='Add Main Tab & Nested Tab'>

</body>
</html>



$(function() {

    $("#addTab").click(function() {
        createNestedTabs();
    });

});


function createNestedTabs() {

    //Main Tab..Working fine..
    $("#tabs").append('<div id="mainTab">Main Tab Div</div> ');
    var tabs = $("#tabs").tabs();
    tabs.tabs('add', "#mainTab", "Main Tab");

    //Nested Tab for the above Main Tab..Not working
    $("#tabs").append('<div id="nestedTab1">Nested Tab Div</div> ');
    var nestedTabs = $("#nestedTab1").tabs();
    nestedTabs .tabs('add', "#nestedTab1", "Nested Tab 1");
}

Upvotes: 0

Views: 1786

Answers (1)

Bill Hayden
Bill Hayden

Reputation: 1086

You're missing some HTML structure for the second div. Even though you're creating it dynamically you still need some of the same elements as the first one. Try something like this:

function createNestedTabs() {
    $("#tabs").append('<div id="mainTab">Main Tab Div</div> ');
    var tabs = $("#tabs").tabs();
    tabs.tabs('add', "#mainTab", "Main Tab");


    $("#mainTab").append('<div id="nestedTab1"><ul></ul></div> ');
    $("#nestedTab1").append('<div id="nestedTabContent">Nested tab</div>');
    var nestedTabs = $("#nestedTab1").tabs();
    nestedTabs.tabs('add', "#nestedTabContent", "Nested Tab 1");
}​

I modified your fiddle to demonstrate.

Upvotes: 2

Related Questions