Question

I have a dynamic jQuery function where i add jquery tabs dynamically. It produces HTML like below

<div id="chattabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top" id="some_7"><a href="#ui-tabs-2"><span>Tsefolasha Sefolasha</span></a></li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" id="some_9"><a href="#ui-tabs-4"><span>Emaynor Maynor</span></a></li>
    </ul>
    <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        <ul id="messagelist_7">
        </ul>
    </div>
    <div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        <ul id="messagelist_9">
        </ul>
    </div>
    <input type="text" value=" " id="msg">
    <input type="button" value="send" id="send">
    <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

Now I need to add content to each of the tabs when the users clicks the button send at the bottom . something like

$('#message_9').append('<li>' + message + '</li>');

How can I do that?

Also, how can I get this id from outside of chattabs div?

Answer 1

You can use the activate event when you initialize your tabs.

$( "#chattabs" ).tabs({
    activate: function( event, ui ) {

        //Append something to the active tab
        ui.newPanel.append();

        //Get the active tab`s nested ul
        var ul = ui.newPanel.find('ul');

        //Get the id of the active tab's nested ul
        var ul_id = ul.attr('id');


    }
});