tab not working when dynamically added using jquery

Question

i am using the existing jquery UI tabs..

 <div id="tabs">
    <ul>
        <li><a href="#tabs-1">title 1</a></li>
        <li><a href="#tabs-2">title 2</a></li>
        <li><a href="#tabs-3">title 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>t1 content</p>
    </div>
    <div id="tabs-2">
        <p>t2 content</p>
    </div>
    <div id="tabs-3">
        <p>t3 content</p>
    </div>
</div>    

when rendered in the browser, jquery adds some set of classes to the <li> elements. [some part of it given below]

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
       <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
       <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
       <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
</ul>


when I append some <li> elements in <ul> using the following jquery code:

$('#tabs ul').append($('<li><a href="#tabs-4">title 4</a></li>');

The list gets appended but the classes are not added to it, hence do not exhibit the tab functionality.

Please give some insight into it.

ltalhouarne · Accepted Answer · 2014-10-27 11:53:18Z

2

You also need to add the div with the tab id:

    var num_tabs = $('div#tabs ul li.tab').length + 1;        
    $('div#tabs ul').append(
        '<li class="tab"><a href="#tab-' + num_tabs + '">Section ' + num_tabs + '</a></li>');

    $('div#tabs').append(
        '<div id="tab-' + num_tabs + '"></div>');

Then try a refresh on tabs:

 $("div#tabs").tabs("refresh");

WORKING Fiddle

edited Oct 27, 2014 at 11:53

answered Oct 27, 2014 at 11:38

ltalhouarne

4,6382 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Felix Over a year ago

Nope. Its not working out! Actally I have a button <button id="buttonId">Add Tab</button> ...and the following jquery function...$(document).on('click', '#buttonId', function () { $('#tabs ul').append($('<li><a>add me</a></li>')); $("div#tabs").tabs("refresh"); });

Felix Over a year ago

Thank you!. it works. I used load() to append the tabs, but I failed to refresh them inside the callback method.

Ami Schreiber Over a year ago

Brilliant! The "refresh" was what I was missing. Thanks @Italhouarne!

ltalhouarne Over a year ago

@AmiSchreiber my pleasure!

Collectives™ on Stack Overflow

tab not working when dynamically added using jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related