Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Mike on Aug 13, 2008 05:35
open dhtmlx forum
Error: dhtmlxTabBar is undefined

I am attempting to use the dhtmlxTabBar but I am unable to initialize the tab bar using javascript. I have followed your example and can initialize the tab bar using html but not when I use javascript. The error I am receiving is: "dhtmlxTabBar is undefined". Normally, I would conclude that one of the required .js files is not included in the page. However, this is not the case.

In the example below, I have two tab bars. Tabbar B (b_tabbar) is created and Tabbar A (a_tabbar)is not. Both of these tabbars make use of the included .js files, so I'm not sure what the root of the problem would be. It may have something to do with the web server because both of these tab bars initialize when I view the page by opening the html file directly in a browser rather than going through the web server. I'm running Tomcat 6.018.

Can anyone offer a suggestion?


<html>
<head>
<link rel="STYLESHEET" type="text/css" href="dhtmlxtabbar.css">
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxcommon.js"></script>
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxtabbar.js"></script>
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxtabbar_start.js"></script>
<script>
    tabbar=new dhtmlxtabbar("a_tabbar","top");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs.xml");
tabbar.setTabActive("a1");
</script>
</head>
<body>

<div id="a_tabbar" style="width:500;height:300"></div>

<div id="b_tabbar" class="dhtmlxTabBar" imgpath="imgs/" style="width:390; height:200;">
<div id="b1" name="Tab 1">Content 1</div>
<div id="b2" name="Tab 2">Content 2</div>
<div id="b3" name="Tab 3">Content 3</div>
</div>
</body>

</html>


Tab Bar A uses the following xml file....

<?xml version="1.0"?>
<tabbar hrefmode="ajax">
<row>
<tab id="a1" width='100px' selected="1" href="sample.jsp">Tab1</tab>
<tab id="a2" width='100px' href="tab2.jsp">Tab2</tab>
<tab id="a3" width='100px' href="tab3.jsp">tab3</tab>
</row>
</tabbar>
Answer posted by Support on Aug 14, 2008 01:13
The correct name of object is dhtmlXTabBar ( the letter X is capital  , casing is important )

  tabbar=new dhtmlXTabBar("a_tabbar","top");

XML loading is async., so the correct code is 
tabbar.loadXML("tabs.xml",function(){
     tabbar.setTabActive("a1");
}); 


Answer posted by Mike on Aug 14, 2008 07:45

Thank you for your quick response.

However, I made the changes you suggested and I am getting the same results. The new html file is as follows...

 

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="dhtmlxtabbar.css">
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxcommon.js"></script>
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxtabbar.js"></script>
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxtabbar_start.js"></script>
<script>
 tabbar=new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("imgs/");
    tabbar.loadXML("tabs.xml",function(){
      tabbar.setTabActive("a1");
});
</script>
</head>
<body>

<div id="a_tabbar" style="width:500;height:300"></div>

<div id="b_tabbar" class="dhtmlxTabBar" imgpath="imgs/" style="width:390; height:200;">
    <div id="b1" name="Tab 1">Content 1</div>
    <div id="b2" name="Tab 2">Content 2</div>
    <div id="b3" name="Tab 3">Content 3</div>
</div>
</body>

</html>

 

 

Any idea why the a_tabbar is not visible?

 

Mike

Answer posted by Mike on Aug 14, 2008 07:59

After modifying the html again, I was able to get the tabbar to initialize by placing the script which loads the tabbar after the div element. I'm not certain why this is working, but the working file I have for the benifit of others is below. Thank you for the support.

 

 

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="dhtmlxtabbar.css">
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxcommon.js"></script>
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxtabbar.js"></script>
<script LANGUAGE="JavaScript" type="text/javascript" src="dhtmlxtabbar_start.js"></script>

</head>
<body>

<div id="a_tabbar" style="width:500;height:300"></div>
<script>
 tabbar=new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("imgs/");
    tabbar.loadXML("tabs.xml",function(){
      tabbar.setTabActive("a1");
});
</script>

</body>

</html>

Answer posted on Aug 14, 2008 09:17
>>I'm not certain why this is working, but the working file I have for the benifit of others is below. 
The container must exist on moment of script initialization, if you have script before HTML , the code will be executed when tabbar's container is not rendered yet, so moving code after HTML or runing it from onload event will resolve issue.