0

Hello am confused and i need help with bootstrap tap retaining its current tab when a postback occurs at the server instead of going back to the first tab. I know this question has being asked before, but i just can't seem to implement the solution. Please be gentle and forgive a poor sinner. I have four tabs given below

     <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">

    <li class="active"><a href="#cSession" title="Personal Information">Create Session</a>   </li>
    <li><a href="#cTerm"  title="Admission Details">Create Term</a></li>
    <li><a href="#cClass" title="Residential Address">Create Class</a></li>
  <li><a href="#vClass" title="Residential Address">View Created Classes</a></li>
</ul>

My script to initiate the tab is

$(document).ready(function () {

var tab = $("#hidTAB").val;
$('#myTab a[href="' + tab + '"]').tab('show');


$('#myTab a[href="#cSession"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "cSession";
})

$('#myTab a[href="#cTerm"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "cTerm";
})

$('#myTab a[href="#cClass"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "cClass";
})

$('#myTab a[href="#vClass"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "vClass";
})

});

I read on this forum that the tab can be stored using a hidden field. I have tried implementing the idea from this post Remain bootstrap tab after postback c#. But i can,t seem to make it work. My jquery skills is as terrible as my french and i don't understand more than 10 phrases in French. Please i need help. Thanks

Community
  • 1
  • 1
James Oshomah
  • 224
  • 2
  • 12

2 Answers2

0

At the very least, this line is wrong $("#hidTAB").val() = "cSession";

It should read: $("#hidTAB").val("cSession");

I would also recommend reducing all of the repetitive code to something like this by using delegation on the parent element like

$('#myTab').on('click','a', function(e) {
  e.preventDefault();
  var $t = $(this);
  $("#myTab").find('li').removeClass("active");
  $t.parent('li').addClass('active').tab('show');
  $("#hidTAB").val($t.attr('href'));
});

Hope that helps.

EDIT : Updated to correct selecting the <li> instead of the <a> since that is where the active class is being set in HTML.

Gary Storey
  • 1,779
  • 2
  • 14
  • 19
  • Hello @Gary Storey i tried your suggestion but still i can't get it to work. Please can you help me further. Thanks – James Oshomah Aug 26 '14 at 09:03
  • Is it the storing of the hidden value after postback that isn't working? Or the code itself? Depending on what browsers you have to support, why don't you try session storage? If you want to try it out I can update the code above or post another answer. – Gary Storey Aug 26 '14 at 14:22
0

Here is an example using sessionStorage

$(function(){

  var selTab = sessionStorage.getItem('myTab');
  var myTab = $('#myTab');

  myTab.on('click','a', function(e) {
    e.preventDefault();
    var $t = $(this);
    myTab.find('li').removeClass('active');
    $t.parent('li').addClass('active').end().tab('show');
    sessionStorage.setItem( 'myTab', $t.attr('href') );
  });

  if ( selTab ) {
    $('a[href='+selTab+']').parent().addClass('active');
  } else {
    myTab.find('li').first().addClass('active'); //set first tab to active if none selected
  }
});

You can see it in action (minus the tab('show') part on this pen

Gary Storey
  • 1,779
  • 2
  • 14
  • 19