Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Bala on Oct 07, 2009 02:54
open dhtmlx forum
Tabbar Issue - Only content displayed and not the tabs

Hi,

I am using free version of tabbar. Both in IE 7 and Firefox, the code below displays only the content of the tabs like

Content 1
Content 2
Content 3

Also, there is no script error. The following is the code of the jsf file which has the tabbar.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>


<link rel="STYLESHEET" type="text/css" href="../dhtmlx/tabbar/dhtmlxtabbar.css">
<script src="../dhtmlx/tabbar/dhtmlxcommon.js"></script>
<script src="../dhtmlx/tabbar/dhtmlxtabbar.js"></script>
    <script src="../dhtmlx/tabbar/dhtmlxtabbar_start.js"></script>


<html>
<head>
</head>
<f:view>
<body>
<f:verbatim><p>JavaServer Faces Page - ${pageContext.request.requestURI}</p></f:verbatim>
<div id="a_tabbar" class="dhtmlxTabBar" imgpath="../dhtmlx/tabbar/imgs/"
style="width:390; height:390;" skinColors="#FCFBFC,#F4F3EE"
select="a1" tabstyle="winRound">
<div id="a1" name="Tab 1">Content 1</div>
<div id="a2" name="Tab 2">Content 2</div>
<div id="a3" name="Tab 3">Content 3</div>
</div>
</body>
</f:view>
</html>
Answer posted by Stanislav (support) on Oct 07, 2009 09:44
Be sure that paths to js files are correct. There are only two ways  how it can not init and not produce any error in the same time 
- js files not included
- the class of the div tag is incorrect ( it is valid in your code, not sure how it will be processed by JSF )
Answer posted by Bala on Oct 07, 2009 21:16

Hi,

Thanks for your quick response.

But I dont think both are the issues.

1. js files not included - The js files for grid were also in a similar location and the grid displays fine. Also I tried to check if the js is accessible by typing the path in the url and the js file opens fine.

2. class of the div tag in incorrect - I tried this in a plain jsp page. It does not work then too.

I tried the javascript init approach too. But I always get the "dhtmlXTabBar is undefined" script error. I found a similar issue posted in KB earlier, but the issue got resolved without the actual reason being found. Plz refer http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=7&q=6074

Also, the code of the jsp is below. Plz help.

<%@ page language="java" contentType="text/html;charset=UTF-8"%>

<link rel="STYLESHEET" type="text/css" href="/codebase/dhtmlxtabbar.css">

<script src="/codebase/dhtmlxtabbar.js"></script>

<script src="/codebase/dhtmlxtabbar_start.js"></script>

<html>

<head></head>

<body>

<div id="a_tabbar" style="width:400;height:100"></div>

<script>

tabbar=new dhtmlXTabBar("a_tabbar");

tabbar.setImagePath("/codebase/imgs/");

</script>

</body>

</html>

Answer posted by Stanislav (support) on Oct 08, 2009 06:14
>>But I always get the "dhtmlXTabBar is undefined" script error.
Same as above, such error message can appears only if dhtmlxtabbar.js is not loaded on the page. 

>>Also, the code of the jsp is below. Plz help.
Not sure, is it matter or not, but you have incorrect structure of html , instead of 



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

You  need to have

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