Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Corejava boy on Jan 08, 2008 11:13
open dhtmlx forum
this.topNod.style has no properties

Hi
I got the following errors

this.parentObject has no properties
_createSelf()dhtmlxtree.js (line 832)
dhtmlXTreeObject("smpltree_box", "100%", "100%", 0)dhtmlxtree.js (line 152)
loadTreeSmpl()testDhtmlx.jsp (line 118)
onload(load )testDhtmlx.jsp (line 1)
[Break on this error] this.parentObject.appendChild(div);
this.topNod.style has no properties

setOnShowHandler()dhtmlXProtobar.js (line 9)
dhtmlXMenuBarObject(body, "120", 0, "", 1, "Edit Menu", undefined)dhtmlXMenuBar.js (line 88)
dhtmlXContextMenuObject("120", 0, "Edit Menu", undefined)dhtmlXMenuBar_cp.... (line 8)
loadTree()testDhtmlx.jsp (line 68)
onload(load )testDhtmlx.jsp (line 1)
[Break on this error] function dhtmlXProtobarObject(){return this};dhtmlXProtobarObject.prototype.set...


my jsp page is

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tree Test</title>
<link rel="STYLESHEET" type="text/css" href="css/dhtmlxtree.css">
<link rel="STYLESHEET" type="text/css" href="css/dhtmlxtabbar.css">
<link rel="STYLESHEET" type="text/css" href="css/menu/dhtmlxmenu.css">
<link rel="STYLESHEET" type="text/css" href="css/menu/dhtmlxmenu_alter.css">
<link rel="STYLESHEET" type="text/css" href="css/menu/context.css">

<script src="scripts/dhtmlxcommon.js"></script>
<script src="scripts/dhtmlxtabbar.js"></script>
<script src="scripts/dhtmlxtree.js"></script>

<script src="scripts/menu/dhtmlXProtobar.js"></script>
<script src="scripts/menu/dhtmlXMenuBar.js"></script>
<script src="scripts/menu/dhtmlXMenuBar_cp.js"></script>



<!-- Following is important inclusion -->
<script src="scripts/dhtmlxtabbar_start.js"></script>

</head>

<body onload="loadTree();loadTreeSmpl(); correctSizes()" onresize= "correctSizes();a_tabbar.enableAutoReSize(true,true);" style="padding: 0;height:100%;">
    <script>
        String.prototype._dhx_trim = function(){
return this.replace(/ /g," ").replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g,"");
}
        /* get node as incoming parameter */
        var node=null;
        var t=document.location.href.split("?");
        var type=null;
        var base=t[0].replace("/index.s?html","");
        if(t[1]!=null){
            var u=t[1].split("&");
            for(var q=0;q<u.length;q++){
                if((node==null)&&(u[q].split("=")[0]=="node")){
                    node=(u[q].split("=")[1]!=null?u[q].split("=")[1]:null);
                    if(node!=null){
                        if(node.length==0){
                            node=null;
                        }
                    };
                }
                if((type==null)&&(u[q].split("=")[0]=="type")){
                    type=(u[q].split("=")[1]!=null?u[q].split("=")[1]:null);
                }
            };
        };
        
        function correctSizes(){
            document.getElementById('tabbarconteiner').style.height = (document.body.offsetHeight - 70)+'px'
        }
        
        /* init tree */
        var tree ;
        var tree_smpl;
        function loadTree(){
            tree = null;
            
            //init menu
             aMenu=new dhtmlXContextMenuObject('120',0, "Edit Menu");
             aMenu.menu.setGfxPath("../images/dhtmlxTree/csh_winstyle/");
             aMenu.menu.loadXML("xml/_context.xml");
            
             //create menu item.....this has to be modified to insert before , insert after and delete
            
             var item = new dhtmlXMenuItemObject("edit_Red","Red","","imgs/red.gif","contextMenu");
     aMenu.menu.addItem(aMenu.menu,item);
var item = new dhtmlXMenuItemObject("edit_Green","Green","","imgs/green.gif","contextMenu");
aMenu.menu.addItem(aMenu.menu,item);
var item = new dhtmlXMenuItemObject("edit_Blue","Blue","","imgs/blue.gif","contextMenu");
     aMenu.menu.addItem(aMenu.menu,item);
            
             aMenu.setContextMenuHandler(onMenuClick);
            
            
            
            tree=new dhtmlXTreeObject("doctree_box","100%","100%",0);
            tree.setImagePath("imgs/");
            
        /*    tree.setOnClickHandler(function(id){openPathDocs(id);}); */
         tree.setOnClickHandler(doOnClick);
            tree.attachEvent("onOpenEnd",updateTreeSize)
            tree.enableCheckBoxes(false);
            
            // tree.enableContextMenu(aMenu);
            
            tree.loadXML("xml/tree_test.xml",autoselectNode);    
        
}

        /*this function open an url when a node is clicked */
         function doOnClick(nodeId){
            // var myUrl = tree.getUserData(nodeId,'myurl');
            
         // rightPane.src="myUrl.jsp?nodeId=" +nodeId " + "&text=" +text ;// where text is the editable field clicked
        
        
             newwindow=window.open();
            newdocument=newwindow.document;
            newdocument.write('this page contains the information of the field you clicked.');
            newdocument.close();
                
             }
        
        function onMenuClick(){
         alert('context menu clicked');
        }
        
        function loadTreeSmpl(){
            tree_smpl=new dhtmlXTreeObject("smpltree_box","100%","100%",0);
            tree_smpl.setImagePath("imgs/");
            tree_smpl.setOnClickHandler(function(id){openPathExamples(id);});
            tree_smpl.attachEvent("onOpenEnd",updateTreeSize)
            
        }
        /* open path funtion */
        
        function openPathExamples(itemId){
            //debugger;
            var url = (tree_smpl.getUserData(itemId, "url")!=null?tree_smpl.getUserData(itemId, "url").toString()._dhx_trim():"");
            if (url=="" && !tree_smpl.hasChildren(itemId)) {
                url = url+"#"+itemId;
            }
            var itemIdTmp = itemId;
            var i = 0;
            do {
                itemIdTmp = tree_smpl.getParentId(itemIdTmp);
                if (tree_smpl.getUserData(itemIdTmp, "url") != null) {
                    url = tree_smpl.getUserData(itemIdTmp, "url").toString()._dhx_trim() + ((url.indexOf("#")!==0)?"/":"") + url;
                }
                i++;
            } while (itemIdTmp != 0)
            window.frames.sampleframe.location.href = url;
        }
         function openPathDocs(id){
            if(tree.getUserData(id,"nonEditableCommand")!=null){
                window.frames.sampleframe.location.href = tree.getUserData(id,"thisurl");
                return;
            }
            var entUrl = "";
            var getFileFl = true;
            var suffix = "#"+id
            
            do{
                var url = tree.getUserData(id,"url");
                if(url!=null){
                    if(getFileFl){
                        entUrl = url.toString()._dhx_trim()+suffix;
                        getFileFl = false;
                    }else{
                        var arTmp = url.split("/");
                        if(arTmp[arTmp.length-1].indexOf(".")!=-1){
                            arTmp[arTmp.length-1] = "";
                            url = arTmp.join("/");
                        }
                        if(url!="")
                            entUrl = url.toString()._dhx_trim()+"/"+entUrl;
                    }
                }
                id = tree.getParentId(id);
            }while(id!="0")
            
            window.frames.sampleframe.location.href = entUrl
        }
        
        
        function updateTreeSize(){
            this.allTree.style.overflow = "visible";
            this.allTree.style.height = this.allTree.scrollHeight+"px";
            
        }
        
        function autoselectNode(){
            if(type=="smpl"){
                tree_smpl.selectItem(node,true);tree_smpl.openItem(node)
            }else{
                tree.selectItem(node,true);tree.openItem(node);
            }
        }
    
    </script>
    
<!--- <a href="javascript:void(0)" onclick="updateTreeSize()">update Size</a> --->

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">

<tr>
    <td width="100%" height="100%" colspan="3">
         <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
            <tr>
                <td width="276">
                    <div id="tabbarconteiner" style="width: 300px; height: 100%; margin: 0 0 0 8px;">
                        <div id="a_tabbar"
                            class="dhtmlxTabBar"
                            tabstyle="scbr"
                            tabheight="28"
                            imgpath="../imgs/"
                            style="width: 400px; height: 100%;"
                            
                            mode="left"
                            offset="3"
                            oninit="a_tabbar.setTabActive(type+'tab')"
                            select="doctab">
                                <div id="doctab" width="620%" name="<table width='100%' height='100%' cellspacing='0' cellpadding='0' border='0' style='margin-left: 3px;'>
                                <tr>
                                    <td width='100%' height='100%' valign='middle' align='center'><img src='imgs/null.gif' class='tab_docs'>
                                    </td>
                                </tr>
                                </table>" style="padding: 8px 8px 0 8px;display:none;">
                                    <div id="doctree_box" style="width: 1336px; height: 100%; "></div></div>
                                
                        </div>
                    </div>
                </td>
                <td width="10">
                
                </td>
                <td align="right">
                    <iframe id="sampleframe" name="sampleframe" width="100%" height="99%" frameborder="0" src="blank.html" style="border: 0px solid #cecece;"></iframe>
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>

    <td height="8" width="100%" colspan="3">
        
    </td>
</tr>
</table>
</body>
</html>

Answer posted by Support on Jan 09, 2008 04:31
You have next line in your code
    >>tree_smpl=new dhtmlXTreeObject("smpltree_box","100%","100%",0);
which tries to create a tree inside element with ID = "smpltree_box" , but there is no container with such ID on page, so component fails and throw an error.