6 comments on “Bootstrap Tabs with Dynamic Content Loading

  1. Thank you for the posting.

    I have a question how would one load the first tab automatically when the page loads?

    I have tried:
    $(‘a[data-toggle=”tab”]:first’).trigger(“shown.bs.tab”);

    but no luck

    Thanks
    Mike

    • I just do it right in the .ready function

      $(document).ready(function(){
      //Get Main Table
      $.ajax({ //AJAX call for data })

      $(‘a[data-toggle=”tab”]’).on(‘shown.bs.tab’, function (e) {
      $.ajax({ // Load tab data })
      })
      })

      Then in your HTML list of tabs just set the one you are loading the initial data into with the class “active” and the tab-pane as active as well.

  2. Thank you for the quick reply.

    This is what I ended up doing but I was hoping there is a cleaner way of doing it.

    In any case thank you again.

    Much appreciated.

    Mike

    • That is so we only make the AJAX call to fill in the tab with content once. If there is no content then load content. If there is content then return. Just saves from hitting the database over and over for data that hasn’t changed. Feel free to remove that check if you want it to always fetch the content even if content already exists in the tab.

  3. How do I modify this and have it use nav-stacked class? I have a very large menu system that is not appropriate for a horizontally tabbed menu. The menu would appear in a div container on the left and all of the content would appear on the right pane (div). I have never seen a working example of this approach.

Leave a Reply