jQuery UI Tabs dynamically adding tabs and content not working

Question

I can't get jQuery UI tabs to work when dynamically adding tabs and content.

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

jQuery

var count = 1;
$('#addspan').click(function() {
    $('#wrap').append('<span id="page' + count + '">testing</span>');
    $('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>');
    count++;
    $('#wrap').tabs();
});

Check http://jsfiddle.net/qKBUu/1/

You can see that newly created content is not showing in it's respected tabs. All content is showing at once and tabs are not working.

Chandu · Accepted Answer · 2011-04-20 21:23:37Z

6

Try this:

    $(function(){
        var count = 1;

        $('#addspan').click(function() {
            $('#wrap').append('<span id="page' + count + '">testing</span>');
            $('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>');
            count++;
            var selIndex = $( "#wrap" ).tabs( "option", "selected" );
            $('#wrap').tabs("destroy").tabs({selected: selIndex});
        });
    });

Alternative:

Try $().tabs("add", options...)

e.g:

$(function(){
            var count = 1;
            $('#wrap').tabs();
            $('#addspan').click(function() {
                $('#wrap').append('<span id="page' + count + '">testing</span>');
                //$('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>');
                $('#wrap').tabs("add","#page" + count, count);
                count++;
            });
        });

Example @: http://jsfiddle.net/Chandu/qKBUu/3/

edited Apr 20, 2011 at 21:23

answered Apr 20, 2011 at 21:13

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

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

3 Comments

Pinkie Over a year ago

Tabs should anchors inside li. like <li><a href="#id"></a></li>. In your example it's creating spans inside anchor tag <a>.

Chandu Over a year ago

@Pinkie: I think the jQuery tabs tabify's an element once and then allows adding new tabs only via add method. I have checked the jquery.ui.tabs source and looks like there is a _create method and that is called only when the tabs are initially called. I don't have much insight into the widgets extension of jQuery. The only other option is to destroy the tabs and create again. Check my updated post.

Tyler Liu Over a year ago

jqueryui 1.9 changed api, add method is deprecated: jqueryui.com/upgrade-guide/1.9/…

Collectives™ on Stack Overflow

jQuery UI Tabs dynamically adding tabs and content not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related