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ção</a></li>
</sec:authorize>
<sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
<li><a href="#remocao" data-toggle="tab" style="display: none;">Remoçã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);
});