Loading remote data into bootstrap tabs

Many people are using Bootstrap for their website layout nowadays, and we all know that Bootstrap comes with quite a few handy JavaScript tools out-of-the-box. One of those tools is Bootstrap tabs, which lets you quickly create tabs to make your site more accessible. One feature, however, is missing from tabs, which would enhance the user experience even more: loading remote data with Ajax. Let us say you have a page that loads slowly because it is generating some statistics for a user. If you render it in tabs using the default construction, you might end up with a slow landing page.

The user might not always want to view his statistics, and it is extremely inconvenient for a user to open a completely new page just to see a few statistics.
This is where the Bootstrap remote tabs plugin comes in, this easy-to-use and lightweight (only 1.7kb) plugin will allow you to set an external source quickly in your existing tab configuration:

<!-- Nav tabs -->
 <ul>
 <li class="active"><a href="#home">Dashboard</a></li>
 <li><a href="#stats">Statistics</a></li>
 </ul>

<!-- Tab panes -->
 <div>
 <div id="home">
 <p>User dasboard<p>
 </div>
 <div id="stats"></div>
 </div>

The plugin reads the data-tab URL setting inside the ‘anchor’ tag of the tab link. No further configuration is required,
although the plugin allows for several other configuration options described in the README file.

So, how does this plugin accomplish what it does? First, it iterates over all the tab components it finds:

$('[data-toggle=tab]').each(function(k, tab) {
	// rest of code here
}

So, now we have the tab component itself. The next step is to a possible remote data url from the tab.

url = tabObj.attr('data-tab-url');
tabDiv = $(tabObj.attr('href'));
// also retrieve other settings

So now we need to listen to an event to trigger the retrieval of the remote data. In the case of the tabs it’s the show event we want to listen for:

var tabEvent = ‘bs-show’; //listen to the show event of bootstrap v3 tabs
tabObj.on(tabEvent, function(e) {
	// call execute request
}

Now we can do a Ajax call to retrieve data from the URL previously passed to the tab, and inject that content into the container that the tab is connected to.

$.ajax({
            url: url,
            success: function(data) {
                if (data) {
                   // don’t load the data more than once until it’s finished
                   if(!trigger.hasClass("loaded")) {
                      trigger.addClass("loaded");
                   }
                    tabContainer.html(data);
                }
            },
            fail: function(data) {
                // the call failed
            }
        });

The code above does a simple jQuery Ajax request, retrieves the remote content and injects it into the tab container. The actual script does a little bit more than that, but those are only applicable to the expanded feature set. This basic example gets the job done for the basic functionality of this plugin.

You can view a live demo here: http://leaseweb.github.io/bootstrap-tabs-demo/ or clone the repo and try it out for yourself: https://github.com/LeaseWeb/bootstrap-remote-tabs

Share

8 thoughts on “Loading remote data into bootstrap tabs”

  1. Thanks a lot for this! After trying numerous ideas of how to handle this problem in my project, this is the only one that truly works for me.
    A couple of questions tho:
    1) There’s a problem with the bootstrap’s fade effect. Originally works, but if you refresh the browser page then the fade effect dissapears for some reason.
    2) How to populate the first tab on page load?

    Thank a lot again.

  2. Yes, how do you load content ajax style for the first tab on page load? Other than that it works great.

  3. Hi Stephen,
    thanks for your script. I integrated it in my web site and it’s almost perfect.
    But I cannot make it to show something while loading remote content. Since the tab will load large content, your ‘loading…’ solution would be perfect.
    But it simply doesn’t show anything until the content is loaded.
    What have I to do to show something while loading? Have I added the loading text to the tab pane:
    Loading… and it seems to work. Is this right or have to check something else?
    TIA
    tony

  4. Hello,

    Your plugin works perfectly! Thank-you!

    I was wondering what would be required to get remote tabs loaded within a remote tab?

    When I try and load remote tabs within a remote tab I don’t see any AJAX requests being fired, but the tabs are otherwise functional.

    Appreciate any tips you might have on adapting your solution.

    Thanks,
    Tim

  5. Hi, Gr8 plugin.

    But insert/show hash href (ie: #sample) in url is bad idea. how do remove hash href from url ?!

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *