Jquery Tabs created dynamically with dynamic naming assignments

Question

I am using the jquery ui tabs to create dynamic tabs on the fly which will start off without any content. From what I can tell my code is building everything and putting it in the proper places, but jquery is not recognizing them as tabs. How would I get it to recognize the new tabs that were created after page load?

The html code:

    <div class="main">
    <div>
        <button id="new">button</button>
    </div>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">View1</a></li>
            <li><a href="#tabs-2">View2</a></li>
            <li id="createView"><a href="null">Create New</a></li>
        </ul>
        <div id="tabs-1">
            <p>something on this page</p>   
        </div>
        <div id="tabs-2">
            <div>
                <p>something else on this page</p>
            </div>
        </div>
    </div>
</div>

the Javascript:

//Tabs functionality
    $('#tabs').tabs();

    //Create new view


    var tabNum = 3;

    $('#new').click(function() {

        $('#tabs ul').append('<li>' + '<a href="' + '#tabs-' + tabNum + '">' + 'newitem' + '</a>' + '</li>');
        $('#tabs').append('<div id="' + 'tabs-' + tabNum + '">' + '<div>new</div>' + '</div>');
        var NewViewNum = 'tabs-' + tabNum;
        $(NewViewNum).focus();

        tabNum++;

    });

What do you mean by "Not recognizing them as tabs"?

sjmdev
– sjmdev

2012-12-31 01:20:33 +00:00
Commented Dec 31, 2012 at 1:20 — sjmdev
– sjmdev, Commented Dec 31, 2012 at 1:20
Refer jqueryui.com/tabs/#manipulation

Umesh .A Bhat
– Umesh .A Bhat

2012-12-31 01:26:50 +00:00
Commented Dec 31, 2012 at 1:26 — Umesh .A Bhat
– Umesh .A Bhat, Commented Dec 31, 2012 at 1:26

Jason Whitted · Accepted Answer · 2012-12-31 01:21:07Z

3

The jQuery UI Tabs have a refresh method you can use per the documentation.

Try calling:

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

answered Dec 31, 2012 at 1:21

Jason Whitted

4,0141 gold badge18 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Jquery Tabs created dynamically with dynamic naming assignments

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related