Start Building Professional
Web Apps Today

DHTMLXtabbat

I am trying to implement an onClick event handler in DHTMLXtabbar and am having difficulty.

I am using the following code and the ajax-html hrefmode to intiiate the tabs.

When I try to access the tabbar methods, I am getting tabbar has no properties.

Could you point out what I am doing wrong? Thanks.

<script language="speedscript">
/*----------------------------------------------------------------------
File : carrierinfo.html
Purpose : Routine to collect and update carrier information
Syntax :

Description : front end display and update routine.


Author(s) : Steven Lichtenberg
Created : 8 Aril 2008
Notes :


----------------------------------------------------------------------*/
define variable carrier as character no-undo.
define variable tabno as character no-undo.
assign
tabno = trim(get-value("tabid"))
carrier = trim(get-value("carrier"))
tabno = if tabno = "" or tabno = ? then "a1" else tabno.
message carrier.
/*
{webidses.i}
message "carriertabs" avail(web-id).
IF NOT AVAIL(web-id) OR (AVAIL(web-id) AND web-id.car-code EQ "")
THEN
DO:
RUN run-web-object IN web-utilities-hdl("web-login").
return.
END.
*/
output-content-type("text/html").
</script>
<script src="/dhtmlxcommon.js"></script>    
<script src="/dhtmlXTabbar.js"></script>
<script src="/dhtmlXTabbar_start.js"></script>
<script src="/dhtmlXTree.js"></script>
<script src="/dhtmlXTree_start.js"></script>

<link rel="STYLESHEET" type="text/css" href="/dhtmlxtabbar.css"/>
<link rel=STYLESHEET TYPE="text/css" HRef="/style.css"/>
<div id="a_tabbar"
     imgpath="/images/"
     class="dhtmlxTabBar"
     skinColors="#FCFBFC,#F4F3EE"
     hrefmode="ajax-html"
     tabstyle="winDflt"
     oninit="a_tabbar.setTabActive('`tabno`')"
     OnSelectHandler="doClick">
    

    
<div id="a1" name="Carrier Info" href="carrierinfo.html?carrier=`carrier`" style="height: 600;visible: true;width: 600;">
    
</div>
<div id="a2" name="Equipment Info" href="bkcarinfo.html?carrier=`carrier`">

</div>
<div id="a3" name="Insurance/Legal Info" href="legalinfo.html?carrier=`carrier`">

</div>
    <div id="a4" name="Service Lanes" href="service.html?carrier=`carrier`">

</div>
</div>
<script language="javascript">
     tabbar=document.getElementById("a_tabbar");
    
     tabbar.enableAutoSize(true,true);
     tabbar.enableAutoReSize(true);
     tabbar.setOnSelectHandler("doClick");
    function doClick(id){
     alert("here" + id);
    }
</script>

a) when initialized from HTML, tabbar doesn't recognize such attribute as OnSelectHandler
b) it seems that you are using incorrect tab names in setTabActive( command

The correct code will be similar to next


<div id="a_tabbar"
     imgpath="/images/"
     class="dhtmlxTabBar"
     skinColors="#FCFBFC,#F4F3EE"
     hrefmode="ajax-html"
     tabstyle="winDflt"
     oninit="a_tabbar.setTabActive('a1'); a_tabbar.setOnSelectHandler(doClick); ">
....
<script language="javascript">
//     tabbar=document.getElementById("a_tabbar");  <= this line not necessary
    
     a_tabbar.enableAutoSize(true,true);    // the tabbar accessible by the same name as its container ID