2

Em minha aplicação spring, eu estou usando o bootstrap em meus views para criar a interface com o usuário. Em um dos views, chamada listagem, eu tenho quatro abas, sendo que inicialmente somente uma é visível (a que recebe o mesmo nome do view, listagem).

As demais abas só devem ser tornadas visíveis quando o usuário clica em botões disponíveis na área interna da aba listagem. Quando isso acontece, uma função jquery lê a página solicitada, extrai o conteúdo da tag `´ e adiciona esse conteúdo à tag especifica.

o código html do meu view listagem é o seguinte:

<!-- 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>

alguém pode me dar uma ideia de como eu posso conseguir tornar visível a aba quanto a tag especifica dessa aba receber o conteúdo apropriado?

ps.: o código que lida com o clique o botão e adiciona o conteúdo à tag especifica é o seguinte:

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

1 Resposta 1

1

Se bem entendi o teu código, a tua função open_interna() recebe um parâmetro que é o elemento alvo cujo valor é #cadastro ou #alteracao ou #remocao pelo que vejo no teu HTML.

Se a minha análise está correcta, para que após aplicares o conteúdo possas tornar esse separador visível, podes disparar um click no botão de controlo do mesmo:

Se target é um objecto

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

Se target é uma 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");
        });
    }
}
0

Você deve fazer log-in para responder a esta pergunta.