Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted on Oct 01, 2008 15:15
open dhtmlx forum
dhtmlxTabbar from HTML and setOnSelectHandler

Is there a problem with creating a TabBar from HTML and calling setOnSelectHandler() under IE? The following page works as expected under FireFox/Chrome/etc., but when I view the page in IE I get the error: "Object doesn't support this property or method."

<html>
<head>
<script type="text/javascript" src="javascript/dhtmlx/dhtmlxcommon.js?version=0809-1-080929-1">
</script>
<script type="text/javascript" src="javascript/dhtmlx/dhtmlxtabbar.js?version=0809-1-080929-1">
</script>
<script type="text/javascript" src="javascript/dhtmlx/dhtmlxtabbar_start.js?version=0809-1-080929-1">
</script>

    <link rel="stylesheet" type="text/css" href="javascript/dhtmlx/dhtmlxgrid.css?version=0809-1-080929-1">
<link rel="stylesheet" type="text/css" href="javascript/dhtmlx/dhtmlxtabbar.css?version=0809-1-080929-1">
<title>TabBar Test</title>
</head>

<body onload="bodyOnLoad();">

<div id="tabbar1" class="dhtmlxTabBar" imgpath="javascript/dhtmlx/imgs/" align="left" offset="10px" style="width: 300px; height: 100px;">
    <div id="smallTab1" name="Small" class="dhx_tabcontent_sub_zone" width="*">
        <div>
            <div style="padding: 10px;">
                small
            </div>
        </div>
    </div>
     <div id="mediumTab1" name="Medium" class="dhx_tabcontent_sub_zone" width="*">
        <div>
            <div style="padding: 10px;">
                medium<br>
                medium<br>
                medium<br>
                medium<br>
                medium<br>
            </div>
        </div>
    </div>

    <div id="largeTab1" name="Large" class="dhx_tabcontent_sub_zone" width="*">
        <div>
            <div style="padding: 10px;">
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
                big<br>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function bodyOnLoad()
    {
        tabbar1.setOnSelectHandler(
            function(newTab, oldTab)
            {
                alert('Went from: ' + oldTab + ' to: ' + newTab);
                return true;
            }
        );
    }
</script>
</body>
</html>
Answer posted by Support on Oct 02, 2008 01:37
Problem caused by order of initialization events, in IE , code of bodyOnLoad called before tabbar initialization code. 
To make it correct for all browsers you can use 
<body>  
<div id="tabbar1" class="dhtmlxTabBar" oninit="bodyOnLoad()" ...