{"id":2728,"date":"2015-03-09T17:33:12","date_gmt":"2015-03-09T13:33:12","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2728"},"modified":"2026-04-03T15:35:55","modified_gmt":"2026-04-03T12:35:55","slug":"loading-content-into-tabs-on-demand","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/loading-content-into-tabs-on-demand\/","title":{"rendered":"DHTMLX Little-Known Features: Loading Content into Tabs on Demand"},"content":{"rendered":"

\n

\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, \n please contact us<\/a>,
and we will send it to you.\n <\/p>\n <\/div>\n <\/div>\n
\nWe continue sharing small tricks and tips that enable so many abilities when using our JavaScript widget library<\/a> – DHTMLX Suite. This time we’ll show you how to load content into tabs on demand.<\/p>\n

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.<\/p>\n

\"load-content-into-tabs-on-demand\"
\n
\nAnd now let’s see what we need to do for it. <\/p>\n

Step 1.<\/strong> First of all, we init the tabbar:<\/p>\n

myTabbar =<\/span> new<\/span> dhtmlXTabBar(<\/span>{<\/span>
\n    parent:<\/span> "tabbarObj"<\/span>,<\/span>
\n    tabs:<\/span> [<\/span>
\n        {<\/span>id:<\/span> "a1"<\/span>,<\/span> text:<\/span> "Tab 1"<\/span>}<\/span>,<\/span>
\n        {<\/span>id:<\/span> "a2"<\/span>,<\/span> text:<\/span> "Tab 2"<\/span>}<\/span>,<\/span>
\n        {<\/span>id:<\/span> "a3"<\/span>,<\/span> text:<\/span> "Tab 3"<\/span>}<\/span>
\n    ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

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.<\/p>\n

Step 2.<\/strong> Then we attach onSelect event handler to the tabbar:<\/p>\n

myTabbar.attachEvent<\/span>(<\/span>"onSelect"<\/span>,<\/span> doOnSelect)<\/span>;<\/span><\/div><\/div>\n

And also we need the event handler itself:<\/p>\n

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

In this case we create initedTabs variable and save the data in it about whether the tab is selected 1 time at least:<\/p>\n

var<\/span> initedTabs =<\/span> {<\/span>}<\/span>;<\/span><\/div><\/div>\n

Step 3.<\/strong> 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’):<\/p>\n

myTabbar.cells<\/span>(<\/span>"a1"<\/span>)<\/span>.setActive<\/span>(<\/span>true<\/span>)<\/span>;<\/span><\/div><\/div>\n

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<\/a> come useful for you. <\/p>\n","protected":false},"excerpt":{"rendered":"

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 …<\/p>\n","protected":false},"author":2,"featured_media":3307,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,72,1],"tags":[33,43,14,10],"class_list":["post-2728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-general","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-tips","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2728"}],"version-history":[{"count":2,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2728\/revisions"}],"predecessor-version":[{"id":15362,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2728\/revisions\/15362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3307"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}