3

Eu estou com uma tela feita no bootstrap que contem duas tabs, uma chamada "Configurações" e a outra "Usuários". Dentro da tab "Configurações", tenho um formulário simples, normal, já dentro da tab "Usuarios", tenho um select do banco, e com esse resultado eu monto uma paginação.

O problema é que quando eu clico em qualquer link da paginação, a tela volta para a tab "Configurações".

Já tentei adicionar a classe "active" nas tabs e nas divs correspondentes via jQuery mas não funcionou, tentei também passar o id da tab pela URL mas também não deu.

Trecho jQuery:

$(".pagination").find('a').each(function(){
  $(this).click(function(e){                
    e.preventDefault();
    $("a[href='#alunos']").tab('show');
  });
});

Trecho HTML:

<ul id="tabs_sistem" class="nav nav-tabs">
  <li id="tab_perfil" class="active">
    <a href="#perfil" data-toggle="tab">Configurações</a>
  </li>
  <li id="tab_alunos">
    <a href="#alunos" data-toggle="tab">Usuários</a>
  </li>
</ul>

Tab com paginação:

<div class="tab-pane" id="alunos">
  <table class="table table-striped table-hover table-instituicao-usuario-list">
    <thead>
      <th>Nome</th>
      <th>E-mail</th>
      <th>Data de nascimento</th>
      <th>Perfil</th>
      <th class="text-center">Remover</th>
    </thead>
    <tbody>
      <?php
        include realpath(dirname(__FILE__)) . '/includes/sistema.paginacao.php';
      ?>
    </tbody>
  </table>
</div>
4
  • Abas como as deste link? Acho que você vai precisar postar o código da sua página, pois provavelmente é um detalhe de implementação.
    – utluiz
    Commented 23/12/2013 às 16:03
  • isso, e isso mesmo, so que dentro de uma delas tem uma paginação, vou postar o codigo Commented 23/12/2013 às 16:13
  • Você poderia postar um exemplo em jsfiddle.net para melhorar a sua pergunta. Commented 23/12/2013 às 16:20
  • jsfiddle.net/danielswater/qeu9z Commented 23/12/2013 às 16:28

4 Respostas 4

4

Quando uma página é recarregada, seu estado anterior é perdido. Portanto, de acordo com o trecho onde você define a aba Configuração como active, o comportamento que você obteve, de obter a primeira aba sempre ativa, é o esperado.

Se alterar sua página para ativar a aba "Usuários" por padrão, o inverso será verdadeiro, isto é, esta aba será sempre exibida:

<ul id="tabs_sistem" class="nav nav-tabs">
    <li id="tab_perfil"><a href="#perfil" data-toggle="tab">Configurações</a></li>
    <li id="tab_alunos"  class="active"><a href="#alunos" data-toggle="tab">Usuários</a></li>
</ul>

Uma solução para isso é incluir uma lógica no seu código do servidor, no caso em PHP, para decidir qual aba deve ser ativada quando a página for carregada. Veja o exemplo a seguir:

<?php
$aba_atual = //sua lógica vai aqui
?>
<ul id="tabs_sistem" class="nav nav-tabs">
    <li id="tab_perfil" <?php if ($aba_atual == 0) { ?> class="active"<?php } ?>>
        <a href="#perfil" data-toggle="tab">Configurações</a>
    </li>
    <li id="tab_alunos" <?php if ($aba_atual == 1) { ?> class="active"<?php } ?>>
        <a href="#alunos" data-toggle="tab">Usuários</a>
    </li>
</ul>

Dessa forma não é necessário nenhum script.


Por outro lado, você pode também fazer isso via javascript ao incluir um parâmetro na URL.

$(function(){

    //seleciona a aba baseando-se na URL atual
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show');
    } 

    //muda a url ao clicar numa aba
    $('.nav-tabs a').on('shown', function (e) {
        window.location.hash = e.target.hash;
    })
});

O problema aqui é que o atributo action do formulário é fixo e, ao fazer o submit, a URL não vai levar o parâmetro com a aba atualmente selecionada. Alternativas para resolver poderiam ser:

  • Colocar um campo oculto no formulário que enviasse ao servidor a aba selecionada. Então o código em PHP acima poderia recuperar o valor desse campo.
  • Armazenar qual aba está selecionada num Cookie e recuperar esse valor na inicialização da página.
1
  • vou testar com o php mesmo amigo, volto aqui jaja pra postar o resultado, valeu por enquanto Commented 23/12/2013 às 17:11
3

Procurando a melhor implementação que achei no stackoverflow para uma necessidade que tive na semana passada cheguei a esta resposta

Veja a diferença do evento shown e shown.bs.tab

Bootstrap 2

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Bootstrap 3

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Acredito que nesta resposta você encontrará várias formas de fazer e poderá encontrar a que se enquadra melhor em seu projeto.

2

Então, o que acontece é que quando você utiliza a paginação do PHP, você está fazendo post para carregar a nova página... Você precisaria fazer essa páginação via JavaScript ou adicionar uma chamada Ajax no seu PHP, segue um exemplo de chamada Ajax, com jQuery:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

Não tenho como lhe dar um código mais acurado pois você não forneceu nenhum detalhe do seu código em PHP.

1

Amigo você pode implementar essa função:

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Que vai capturar parametros, e nos links da página que apontam para ela mesma você pode colocar algo como ?tab=usuarios

Depois no onload da pagina algo como:

$(function(){
   var tab = getURLParameter('tab');
   if(tab != undefined && tab == 'usuarios')
      $('a[href=//#alunos]').trigger('click');
})

E voila!

Via PHP é ainda mais fácil,

Vamos supor que você passou seu link via get na URL, basta na hora de renderizar a pagina fazer algo assim:

<?php
   $tab = $_GET['tab'] == 'usuario' ? 1 : 0;
?>

depois nas tabs:

<ul id="tabs_sistem" class="nav nav-tabs">
  <li id="tab_perfil" <?php echo $tab == 1 ? '' : 'class="active"';?>>
    <a href="#perfil" data-toggle="tab">Configurações</a>
  </li>
  <li id="tab_alunos" <?php echo $tab == 1 ? 'class="active"' : '';?>>
    <a href="#alunos" data-toggle="tab">Usuários</a>
  </li>
</ul>
2
  • 1
    @utluiz fiz com o php mesmo e deu certo, valeu pela ajuda Commented 23/12/2013 às 17:32
  • teria como postar a solução ? @DanielSwater Commented 8/02/2017 às 18:13

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .