visibility of tabs using bootstrap

Question

visibility of tabs using bootstrap

Navigation

#1 by (1 votes)

2

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

The remaining tabs should only be made visible when the user clicks available buttons in the inner area of the listagem tab. When this happens, a jquery function reads the requested page, extracts the contents of the '' tag and adds that content to the specified 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>

Can anyone give me an idea how I can make the tab visible as long as the tag specifies that tab to receive the appropriate content?

ps: The code that handles the click button and adds 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);
});

jquery twitter-bootstrap

asked by anonymous 20.06.2014 / 21:32

1 answer

XCode - array position value is not displayed DB Dynamic MongoDB

score 1 · Accepted Answer

If I understand your code, your open_interna() function gets 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 applying the content you can make this tab visible, you can fire a click on the control button on it:

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");
        });
    }
}