Bootstrap 'shown.bs.tab' event not firing on programmatically showing the tab (using tab('show'))

Question

This is my html:

<div class="profile_nav_tabs" id="profile_nav_tabs">
  <ul class="profile-tabs">
    <li>
      <a data-toggle="tab" href="#tab1">Tab 1</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2">Tab 2</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab3">Tab 3</a>
    </li>
  </ul>
</div>


<div class="tab-content">
   <div class="tab-pane" id="tab1">Tab1</div>
   <div class="tab-pane" id="tab2">Tab2</div>
   <div class="tab-pane" id="tab3">Tab3</div>
</div>

This is my Javascript:

(function(){
  var hash = window.location.hash;
  if(hash){
    $("#profile_nav_tabs " + "a[href=" + hash + "]").tab('show');
  }

  $('#profile_nav_tabs a').on('shown.bs.tab', function(event){
    window.location.hash = event.target.hash;
    alert("hello");
    // some ajax call
  })
})();

Now, If I refresh the page, the url being local.dev/users/profile/#tab1 , the tab1 content shows up, but the shown.bs.tab event does not fire. That is, neither the alert shows nor the ajax call is made.

The event is triggered only when I click on the <a data-toggle="tab" href="#tab1"> physically.

I want the url to be updated on each tab change and I also want a callback once the tab is showed on page load.

Does the shown.bs.tab event not fire on programmatically showing the tab?

Answer 1

There are two things necessary to get your code to run:

1. Propertly quote or escape hash (due to the # character) when it is inserted into jQuery's attribute equals selector. See jQuery Selectors, Category: Attribute :

   Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.

   • double quotes inside single quotes: $('a[rel="nofollow self"]')
   • single quotes inside double quotes: $("a[rel='nofollow self']")
   • escaped single quotes inside single quotes: $('a[rel=\\'nofollow self\\']')
   • escaped double quotes inside double quotes: $("a[rel=\\"nofollow self\\"]")

   The variation you choose is generally a matter of style or convenience.

   Linked in the above quote, W3C has the following to say on "valid identifiers" in CSS:

   In CSS, identifiers (including element names, classes, and IDs in selectors ) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\\&W\\?" or "B\\26 W\\3F".

   The # character is code point U+0023 and outside the range of characters allowed in a valid identifier.

2. Add the shown.bs.tab event handler before executing $.tab('show')

So change your script to the following:

(function(){
  $('#profile_nav_tabs a').on('shown.bs.tab', function(event){
    window.location.hash = event.target.hash;
    alert("hello");
    // some ajax call
  });

  var hash = window.location.hash;
  if(hash){
    $("#profile_nav_tabs " + 'a[href="' + hash + '"]').tab('show');
  }
})();

This has to be placed after your HTML snippet in the DOM, but I assume that's already the case.

Also note that you were missing a semicolon after your event handler binding.