DHTMLX Little-Known Features: Loading Content into Tabs on Demand

We continue sharing small tricks and tips that enable so many abilities when using our JavaScript widget library – DHTMLX Suite. This time we’ll show you how to load content into tabs on demand.

The described ability allows you to decrease the load on your app. The end-users of your product may not need all the content to be load at once. Nobody will deny that this feature will make your app faster and more efficient.


And now let’s see what we need to do for it.

Step 1. First of all, we init the tabbar:

myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",
    tabs: [
        {id: "a1", text: "Tab 1"},
        {id: "a2", text: "Tab 2"},
        {id: "a3", text: "Tab 3"}

Notice that we don’t select any tab yet, because we need to add onSelect even handler at first to call it at the tab selection.

Step 2. Then we attach onSelect event handler to the tabbar:

myTabbar.attachEvent("onSelect", doOnSelect);

And also we need the event handler itself:

function doOnSelect(id) {
    // check if tab is not inited yet
    if (initedTabs[id] != true) {
        // init component
        var myComponent = myTabbar.cells(id).attachComponent();
        // mark tab as inited
        initedTabs[id] = true;
    // return 'true' to allow tab to be selected
    return true;

In this case we create initedTabs variable and save the data in it about whether the tab is selected 1 time at least:

var initedTabs = {};

Step 3. The next and final step is to select the first tab (i.e. selected tab on init), and then force onSelect event trigger (set the 1st param to ‘true’):


When you try to apply our tips, feel free to leave your comments about the received result in the comments section below. We’ll be happy to know that our articles come useful for you.

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components