jQuery not updating/switching a different tab div bootstrap tabs active class, Why?

We find that our bootstrap tabs active class not changing or working or switching and we wonder why. I had this problem of bootstrap tabs not switching and I will explain how I solved it, with an example. We are using jQuery to try switching bootstrap tabs programmatically automatically, using jQuery's set active tab on click.

We are trying to figure out and code how to change active tab in bootstrap using jQuery.

We find that our jQuery code is behaving not as we expect it to, which is, to say the least, very frustrating. Like, for example, we expect it to show a certain content in a certain bootstrap tab or div, but it updated the content in a different tab or div, instead. My jQuery was updating a different div.

The first time we encountered such a situation, it was frustrating. When you click on the tab or do it in the jQuery code and find that the bootstrap tabs are not switching, it really upsets you. You are setting the active tab using jQuery, but the bootstrap tab is not switching.

I have to state here that the key to finding a solution to a problem like this, or for any problem for that matter, is persistence. Also, try to split the problem into different small pieces.

It also helps to take a break; take our attention elsewhere and allow our sub-conscious to work on a solution.

Approaching the bootstrap class or div problem

In our case, there is also no specific error that is shown or seen in the debugger or developer tools window as we try and set active tab pane using javascript or jQuery. So, it becomes difficult to home in on the error. As with solving any problem, to solve bootstrap tabs active class not working, what we need is a cool mind and a some experience to troubleshoot in such a situation.

Taking time off from the task, addressing a different task and coming back at a later time helps, almost in all situations.

Here, I deduced that the most probable reason would be that the div that is getting updated is not closed. Some of the closing tags that should show the tab pane are missing.

So, the div or bootstrap class that you are updating is actually part of the previous named div and so the previous div / class is getting updated and not the one that you intended.

Solution: Close the previous div properly to create the differentiation. Check and compare the opening tags with the closing tags.

$( "#home" ).removeClass("active");
$( "#one" ).removeClass("active");
$( "#menu1" ).html( text );
$( "#menu1" ).addClass("fade in active");
$( "#two" ).addClass("active");
 
In the above jQuery script, div menu1 is updated with some html content.

Then the div with id menu1 is made active. Then #two is made active. #two here is a tab visualization. Two different tabs are created in this example to provide the visitor a feel of viewing two different screens.

In normal situations, this should provide the impression that a different tab is being viewed, due to the jQuery code.

But, in our case, it did not happen.

Because, our code looked something like this

<div id="home">
      <div id="menu1">
      </div>
</div>

In this case above, "menu1" becomes a subset of "home" and thus any update of the menu1 is reflected in "home".

The right code would have been

<div class="container">
     <div id="home">
     </div>

</div>

<div class="container">
     <div id="menu1">
     </div>

</div>

Proper closing of the tags, is very important.

A simple solution for when jQuery is not updating the right tab or div or class, but is updating a different tab, div or class.

It is frustrating till we understand and identify it; then it becomes easier to make the update of the right div, tab or class using jQuery.

jQuery updating a different tab different div bootstrap class SOLVED!