Question

So,

I’m trying to come up with a way to dynamically load content into multiple tabs, where each tab can contain anywhere from one to several elements (reports).

Currently, the reports are loaded on page load with jQuery $.load. I’m using Bootstrap and bootstrap tabs. I found a site that teaches how to load multiple tabs, but not specifically what I need to do. That site is here: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/

In contrast, each tab is set up more like this:

<div id="tab1">
<div id="report1"></div>
<div id="report2"></div>
</div>

I cannot use the top-level div to load the content, because it will potentially have multiple children. I need to loop through the div’s, use regex to parse the ID, and load each report when the tabs are changed.

I haven’t yet figured out the regex expression, but it should be fairly simple – the element id will be something like this : “#be78f5aa3-25”. This is an alphanumeric 9-character dbid, followed by a hypen, followed by a 1-3 digit integer (not starting in 0). Then I need to split those two strings into separate variables and inject them into an API call.

Answer 1

Anyone looking to load multiple pages into bootstrap tabs may find this of use. I was able to get it working using some regex (specific to my application), placing div’s within the tab-pane container’s that had an Element Id which could be used to create the report I wanted to load into the container using $.load. I also added a few things for persistent tabs when the user went to another page and then used the back button, and another condition to load the content in the first tab if there was no hash in the URL.

I’m sure it could be cleaned up, but you get the gist..

$(function() {
    "use strict";
    var baseURL, $navbox;
    baseURL = window.location.protocol + "//" + window.location.hostname + "/db/";
    $navbox = $("#myTabs");
    $navbox.bind("show", function(e) {
        var contentID, pattern, selectDiv;
        pattern = /#(\Btab|tab\B)?(\Bdropdown|dropdown\B)?([1-9]{1}[0-9]*)/i;
        contentID = e.target.toString().match(pattern)[0];
        selectDiv = contentID + " > div";
        return $(selectDiv).each(function() {
            var parts = this.id.match(/(##enter regex here)/);
            if (parts) {
                $(this).load(baseURL + parts[0]);
                return;
            }
            return $("#myTabs").tab();
        });
    });
    if (window.location.hash) {
        $('#myTabs').find('a[href="'+window.location.hash+'"]').tab('show');
    }
    else { 
        var elemID = "#"+$('[class^="tab-pane active"]').attr('id') + " > div";
        $(elemID).each(function() {
            var parts = this.id.match(/(##enter regex here)/);
            $(this).load(baseURL + parts[0]);
            return $("#myTabs").tab();
        });
    }
});

$('#myTabs a').click(function (e) {
    e.preventDefault();
    var bob = jQuery(this).attr("href");
    bob = jQuery.trim(bob);
    if(bob == "" || bob == "javascript:void(0)") {
        return;
    }
    else {
        window.location.hash = $(this).attr('href');
        $(this).tab('show');
    }
});