Tabs visibility using bootstrap

Question

In my spring application, I am using the bootstrap in my views to create the user interface. In one of the views, called listagem, i have four tabs, initially only one is visible (the one that gets the same view name, listing).

Other tabs should only be made visible when the user clicks on buttons available in the internal area of the tab listagem. When this happens, a jquery function reads the requested page, extracts the contents of the ` tag and adds that content to the specific tag.

the html code of my view listagem is as follows:

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#listagem" data-toggle="tab">Listagem</a></li>

  <sec:authorize access="hasPermission(#user, 'cadastra_${param.name}')">
    <li><a href="#cadastro" data-toggle="tab" style="display: none;">Cadastro</a></li>
  </sec:authorize>

  <sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
    <li><a href="#alteracao" data-toggle="tab" style="display: none;">Altera&ccedil;&atilde;o</a></li>
  </sec:authorize>

  <sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
    <li><a href="#remocao" data-toggle="tab" style="display: none;">Remo&ccedil;&atilde;o</a></li>
  </sec:authorize>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="listagem">       
        <div class="panel panel-default">

            <div class="panel-heading">
                Listagem
            </div>

            <div class="panel-body">
                <p>...</p>
            </div>

            <table class="bordered">
                <thead>
                    <tr>
                        <th class="col" data-property="#">#</th>
                        <c:forEach var="item" items="${paramValues.elements}" varStatus="status">
                            <th class="col" data-property="<c:out value="${item}"/>">
                                <c:out value="${paramValues.label[status.index]}"/>
                            </th>
                        </c:forEach>
                        <th class="col" data-property=""></th>
                    </tr>
                </thead>

                <tbody class="content">
                </tbody>

                <tfoot>
                    <tr>
                        <sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
                            <td class="comando" data-nome="altera" data-action="${altera}"></td>
                        </sec:authorize>
                        <sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
                            <td class="comando" data-nome="remove" data-action="${altera}"></td>
                        </sec:authorize>
                    </tr>
                </tfoot>
            </table>
        </div>
  </div>

  <div class="tab-pane" id="cadastro" style="display: none;">
    ...
  </div>

  <div class="tab-pane" id="alteracao" style="display: none;">
    ...
  </div>

  <div class="tab-pane" id="remocao" style="display: none;">
    ...
  </div>
</div>

someone can give me an idea of how I can make visible the tab when the specific tag of this tab receives the appropriate content?

ps.: the code that deals with clicking the button and adding the content to the specific tag is as follows:

function open_interna(url, target) {
    target.toggle();
    if($(target).is(":visible") ) {
        $.ajax({
            type: "GET",
            url: url
        }).done(function( data ) {
            var $temp  = $('<div/>', {html:data});
            var conteudo = $temp.remove('head').html();
            target.empty();
            target.html(conteudo);
        });
    }
}
$(document).on('click', '.action', function (event) {
    event.preventDefault();
    event.stopPropagation();
    var action = $(this).data('action');
    var target = $(this).data('target');
    var div = $('#'+target);
    open_interna(action, div);
});

Answer 1

If I understand your code, your function open_interna() receives a parameter that is the target element whose value is #cadastro or #alteracao or #remocao from what I see in your HTML.

If my analysis is correct, so that after you apply the content you can make that separator visible, you can fire a click on its control button:

If target is an object

function open_interna(url, target) {

    target.toggle();

    if ($(target).is(":visible") ) {

        $.ajax({
            type: "GET",
            url: url
        }).done(function( data ) {
            var $temp  = $('<div/>', {html:data});
            var conteudo = $temp.remove('head').html();
            target.empty();
            target.html(conteudo);


            /* disparar click no botão que apresenta contém o 
             * evento para apresentar a tab
             */
            $('a[href="#'+ target.attr("id") +'"]').trigger("click");
        });
    }
}

If target is a string

function open_interna(url, target) {

    target.toggle();

    if ($(target).is(":visible") ) {

        $.ajax({
            type: "GET",
            url: url
        }).done(function( data ) {
            var $temp  = $('<div/>', {html:data});
            var conteudo = $temp.remove('head').html();
            target.empty();
            target.html(conteudo);


            /* disparar click no botão que apresenta contém o 
             * evento para apresentar a tab
             */
            $('a[href="'+target+'"]').trigger("click");
        });
    }
}