CODEWITHSUNDEEP
javascriptjqueryhtml
AloNE
AloNE

Reputation: 311

dynamically adding a tab, on button click

Html code :

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">List</a></li>
        <li><a href="#fragment-2">List</a></li>
        <li><a href="#fragment-3">List</a></li>
    </ul>
    <div id="fragment-1">one</div>
    <div id="fragment-2">two</div>
    <div id="fragment-3">three</div>
</div>
<button id="add_tab">Add Tab</button>

and I want to add one more tab "fragment-4" which is on button onclick event. this tab div is out of <div id="container-1">. and I am use following java script :

$(document).ready(function() {
        var tabs = $("#container-1").tabs();
            var tabCounter = 1;

        $('#add_tab').click( function(){
            var ul = tabs.find( "ul" );
            $( "<li><a href='#fragment-4'>Call Detials</a></li>" ).appendTo( ul );
            tabs.tabs( "refresh" );
            tabs.tabs('select', 1);
        });
  });

Using this function I can get dynamically tab but not content which is write in this tab. so please suggest me what can I do?

Upvotes: 4

Views: 11179

Answers (4)

mishik
mishik

Reputation: 10003

Demo

$(document).ready(function() {
    var tabs = $("#container-1").tabs();
    var tabCounter = 1;

    $('#add_tab').click( function(){
        var ul = tabs.find( "ul" );
        var current_idx = ul.find("li").length + 1; // Get correct index for id
        $("<li><a href='#fragment-" + current_idx + "'>Call Details</a></li>" ).appendTo( ul );
        tabs.append( $('#callDetail') );
        tabs.tabs("refresh");
        tabs.tabs("select", 1);
    });
});

Upvotes: 0

pirs
pirs

Reputation: 2461

$(document).ready(function() {

    var tabs       = $("#container-1").tabs();
    $('#add_tab').click( function(){

        var tabCounter = $('#container-1 ul li').length; // return number of tabs

        // add tabs with button
        $('#container-1').append("<div id='fragment-"+tabCounter+">Content</div>");
        $('#container-1 ul').append("<li><a href='#fragment-"+tabCounter+">"+tabCounter+"</a></li>"); 
        // Note : if you want show literal number, use something like .replace() 

        tabs.tabs("refresh");
        tabs.tabs('select', tabCounter);
    });
});

Upvotes: 0

colestrode
colestrode

Reputation: 10668

In addition to adding the li you need to add a div with the content. The ID of the div should match the href attribute of the li element.

Something like this:

EDIT: Added dynamic tab ID's

$(document).ready(function () {
    var tabs = $("#container-1").tabs();
    var tabCounter = 3;

    $('#add_tab').click(function () {
        tabCounter++;

        var ul = tabs.find("ul");
        $('<li><a href="#fragment-' + tabCounter + '">Call Detials</a></li>').appendTo(ul);
        tabs.append('<div id="fragment-' + tabCounter + '">Hello there ' + tabCounter + '</div>');
        tabs.tabs("refresh");
        tabs.tabs('select', 1);
    });
});

Working Demo

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

Along with adding the li you need to add a content div also.

$(document).ready(function() {
    var tabs = $("#container-1").tabs();
    var tabCounter = tabs.find('ul').first().children().length;

    $('#add_tab').click( function(){
        var ul = tabs.find( "ul" );
        $( '<li><a href="#fragment-' + ++tabCounter + '">Call Detials</a></li>' ).appendTo( ul );
        $( '<div id="fragment-' + tabCounter + '">'+ tabCounter +'</div>' ).appendTo( tabs );
        tabs.tabs( "refresh" );
        tabs.tabs('select', tabCounter - 1);
    });
});

Demo: Fiddle

Upvotes: 0

Related Questions