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

The post Loading remote data into bootstrap tabs appeared first on LeaseWeb Labs.