DHTMLX Docs & Samples Explorer

Load data in tabbar by ajax

Load data in tabbar by ajax

Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtabbar.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtabbar.js"></script>
<style type="text/css" media="screen">
#log_here{
    font-size:8pt; font-family:Tahoma;
}
</style>
<h1 id="init_tabbar_from_script">Load data in tabbar by ajax</h1>
<div id="a_tabbar" style="width:395px; height:390px;"></div>
<div id="log_here"><div></div></div>        
<script>
tabbar = new dhtmlXTabBar("a_tabbar", "top");
tabbar.setSkin('dhx_skyblue');
tabbar.setImagePath("../../codebase/imgs/");
tabbar.addTab("a1", "Tab 1-1", "100px");
tabbar.addTab("a2", "Tab 1-2", "100px");
tabbar.addTab("a3", "Tab 1-3", "100px");
tabbar.setHrefMode("ajax-html");
tabbar.setContentHref("a1", "../common/test_page_1.html");
tabbar.setContentHref("a2", "../common/test_page_2.html");
tabbar.setContentHref("a3", "../common/test_page_3.html");
 
tabbar.attachEvent("onXLS", function() {
    e_log("onXLS", arguments);
    return true;
});
tabbar.attachEvent("onXLE", function() {
    e_log("onXLE", arguments);
    return true;
});
tabbar.attachEvent("onTabContentLoaded", function() {
    e_log("onTabContentLoaded", arguments);
    return true;
});
 
tabbar.setTabActive("a1");
function e_log(name, data) {
    text = "<b>" + name + "</b> :";
    var d = [];
    for (var i = 0; i < data.length; i++);
    d[i] = data[i];
    text += d.join(",");
    var d = document.createElement("DIV");
    d.innerHTML = text;
    var p = document.getElementById('log_here');
    p.insertBefore(d, p.childNodes[0]);
}
</script>