How to let bootstrap tab active after clicking on pagination?

Question

I have a screen made in the bootstrap that contains two tabs, one called "Settings" and the other "Users". Inside the tab "Settings", I have a simple, normal form, already inside the tab "Users", I have a bank select, and with this result I mount a pagination.

The problem is that when I click on any page link, the screen goes back to the tab "Settings".

I tried to add the "active" class in the corresponding tabs and Divs via jQuery but it didn’t work, I also tried to pass the id tab by URL but also failed.

Stretch jQuery:

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

Snippet:

<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 with pagination:

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

Answer 1

When a page is reloaded, its previous state is lost. Therefore, according to the section where you set the tab Configuração as active, the behavior you obtained, to get the first tab always active, is expected.

If you change your page to activate the "Users" tab by default, the reverse will be true, that is, this tab will always be displayed:

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

One solution for this is to include a logic in your server code, in this case in PHP, to decide which tab should be activated when the page is loaded. See the following example:

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

That way no script is needed.

---

On the other hand, you can also do this via javascript by including a parameter in the 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;
    })
});

The problem here is that the attribute action of the form is fixed and, when making the Submit, the URL will not take the parameter with the currently selected tab. Alternatives to solve could be:

• Put a hidden field in the form that sent the selected tab to the server. Then the above PHP code could recover the value of that field.
• Store which tab is selected in one Cookie and recover this value at page startup.

Answer 2

Looking for the best implementation I found in stackoverflow for a need I had last week I came to this reply

See the difference in the event shown and 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);
});

I believe that in this answer you will find several ways to do and you can find the one that fits best in your project.

Answer 3

So what happens is that when you use the PHP, you’re making post to load the new page... You would need to do this page via JavaScript or add a call Ajax in his PHP, follows an example of calling Ajax, with jQuery:

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

I cannot give you a more accurate code as you have not provided any details of your code on PHP.

Answer 4

Friend you can implement this function:

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

That will capture parameters, and on the page links that point to itself you can put something like ?tab=usuarios

Then in the onload page something like:

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

And voila!

Via PHP is even easier,

Let’s assume that you passed your link via get in the URL, just in time to render the page do something like this:

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

then on 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>