Loading tabs contents via Ajax on activation

Suite and Optimus Suite 5
#1

How can postpone loading content of inactive tabs until that content is actually needed?

#2

just in case i was not clear: is there a way to load ajax content when the tab is selected (activated). I am surprised there is not a parameter for this

#3

Hello
You can try the next approach:

tabbar.attachEvent("onSelect", function(id){ if (tabbar.tabs(id).getFrame()==null){ tabbar.cells(id).attachURL(url); } return true; });

#4

Darya, thank you for your quick reply. That was enought to get me started.

For those interested in more complete lazy loading solution i wrote code below:
Important features are:

  • Dynamically loading one tab on start. If no tab is configured to be active then the first one is activated
  • Content is only loaded once
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="codebase/dhtmlxtabbar.css"/>
	<script src="codebase/dhtmlxtabbar.js"></script>
	<script>
		<!-- some external library script -->
		function lazy_loading_tabbar(selector, tabs) {
			var tabbar = new dhtmlXTabBar(selector);

			Object.keys(tabs).forEach(function (id) {
				tabbar.addTab(id, tabs[id].text, null, null, tabs[id].active || false);
			});

			tabbar.attachEvent("onContentLoaded", function (id) {
				tabbar.cells(id).loaded = true;
			});

			tabbar.attachEvent("onSelect", function (id) {
				if (!tabbar.cells(id).loaded) {
					tabbar.cells(id).attachURL(tabs[id].url, true);
				}

				return true;
			});

			var activeId = tabbar.getActiveTab() || Object.keys(tabs)[0];

			tabbar.tabs(activeId).setActive();
			tabbar.tabs(activeId).attachURL(tabs[activeId].url, true);

			return tabbar;
		}
	</script>
	<script>
		var myTabbar;

		function doOnLoad() {
			var tabs = {
				a1: {text: "Tab 1-1", url: "test_page_1.html"},
				a2: {text: "Tab 1-2", url: "test_page_2.html", active: true},
				a3: {text: "Tab 1-3", url: "test_page_3.html"}
			};

			myTabbar = lazy_loading_tabbar("my_tabbar", tabs);
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div id="my_tabbar" style="width:395px; height:390px;"/>
</body>
</html>
#5

Thanx for sharing this info :slight_smile:

#6

is this also possible, if i have multiple tabbars?

[code]

Integration with dhtmlxTabbar var myTabbar; var myTabbar2; 
	function doOnLoad() {
		
		myTabbar = new dhtmlXTabBar("my_tabbar");
		
		myTabbar.addTab("a1", "Tab 1-1", null, null, true);
		myTabbar.addTab("a2", "Tab 1-2");
		
		myTabbar2 = myTabbar.tabs("a1").attachTabbar({
			tabs: [
				{ id: "a1", text: "Tab 1", active: true },
				{ id: "a2", text: "Tab 2" }
			]
		});
		
	}
</script>
[/code]

==> I want only the avtive TAB to be loaded…

#7

You may use this provided solution for your case.

Also you may do something like:
myTabbar.attachEvent(“onTabClick”, function(id, lastId){
if (id==“some_tab” && !myTabbar.tabs(id).getAttachedObject())
myTabbar.tabs(“conf”).attachURL(“data.html”);
});
For each of the tab, where the “lazy_loading” is required.

#8

well, i want the “lazy loading” for each of my ~20 tabs, so that only the active on is loaded.

In my case i have a tabbar with multiple tabbars, that also have tabbars :wink:

#9

any help for this? :slight_smile:

#10

up :wink:

#11

I cannot see any problem to use the suggested solution in your situation:

You may use this provided solution for your case.

Also you may do something like:
myTabbar.attachEvent(“onTabClick”, function(id, lastId){
if (id==“some_tab” && !myTabbar.tabs(id).getAttachedObject())
myTabbar.tabs(“conf”).attachURL(“data.html”);
});
For each of the tab, where the “lazy_loading” is required.

If it is not working for you please, provide a complete demo or share a demo link, where the case can be tested.