Question

I have a tab menu where users can add and delete tabs like they want. When creating a new tab, they name it as they like (a bootstrap modal box opens for that). After naming the tab the tab gets created, but I don’t know what to do with the content. I need to load the same content for every tab added, I’v tried all sorts of scripts that I’v found online, but nothing seems to work.

This is the jQuery that I use:

$('.tabs a:last').tab('show');
        $('#createTab').click(function() {
            /* opens the modal box */
            $('#tabModal').modal();
        });
/* after clicking on a link Submit that has the id of newTab */
        $('#newTab').click(function(){
            var title = $('#myInput4').val();
            $('#tabHeaders')
                .append($('<li><a href="#' + title + '" class="tabs"><h1>'+ title +'<i class="icon-remove"></i></h1></a></li>'));
            $('#myTabContent') /* this way adding content does not really work */
                .append($('<div class="tab-pane fade in active" id="'+ title +'"></div>')); 
            $(title).tab('show');
        });
    /* tab delete */
    $('.tabs i.icon-remove').live('click', function() {
       $(this).closest('li').remove();
    });

HTML for adding button:

<ul class="nav nav-tabs" id="tabHeaders">
  <li><a href="#" data-toggle="tab" id="createTab"><h1>&nbsp;&nbsp;<i class="icon-plus"></i>&nbsp;&nbsp;</h1></a></li>
</ul>

I would appreciate if somebody could help me to load the content. I’ve created a file addTab.php that I would like to get loaded in the content part – when the user clicks on #createTab, first they choose the name for the tab and then the content gets loaded to that tab.

Answer 1

example test:

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

to add tab just do this :

$(document).on('click', '#submit_button_in_the_modal', function(event){
    event.stopPropagation();

    var title = $('#myInput4').val();
    $('#tabHeaders').append('<li><a href="#new_tab_id" data-toggle="tab">'+ title +'</a></li>');
    $('.tabs a:last').tab('show');

    //this remove the active content
    $('div.active').removeClass('active').removeClass('in');

    //this add the new content
    $('.tab-content').append('<div class="tab-pane in active" id="new_tab_id"><p> Loading content ...</p></div>');
    //with this you add the tab
    $('#myTab').append('<li><a href="#new_tab_id" data-toggle="tab">Tab Name</a></li>');
    //this shows the tab
    $('#tab a:last').tab('show');
    //this loads the content you want in the content
    $('#new_tab_id').load('addTab.php');    
})

try this please.