element is null

alaoa · 2010-03-13 06:59:32

alaoa
New member
Offline

Registered: 2010-03-13
Posts: 2

Topic: element is null

I tried not to have to post in this forum but I am really stuck here.I have been trying to get this to work based on the demo. At first I tried to use the most update mootools and it three an error that said I needed draggable, Mif.Tree not defined and Class not defined. So i decided to paste everything from the demo verbatim and i'm still getting the error below.

element is null
bottom()mootools.js (line 1712)
(?)()mootools.js (line 1729)
initialize()mif-tr....2.6.js (line 66)
(?)()mootools.js (line 1205)
newClass()mootools.js (line 1147)
index.php?option=com_maian15&task=tools&format=raw&tool=update_view()index....te_view (line 36)
[Break on this error] element.appendChild(context);

here is my html. The two urls are generating the the joson correctly

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"
    dir="ltr">
<head>
<link href="components/com_maian15/stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link href="templates/khepri/css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://localhost/maian/includes/js/joomla.javascript.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/mif-tree-v1.2.6.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/request.js"></script>

<script type="text/javascript">
Mif.Tree.Node.implement({
    
    getPath: function(){
        var path=[];
        var node=this;
        while(node){
            path.push(node.name);
            node=node.getParent();
        }
        return path.reverse().join('/');
    }

});


var tree = new Mif.Tree({
    types:{
    nodeType:{
        openIcon: 'node-open-icon',//node-open-icon - css class for open icon.
        closeIcon: 'node-close-icon'
    }
}

});

tree.load({
    url: 'http://localhost/maian/administrator/index.php?option=com_maian15&task=tools&format=raw&tool=load_root'
});

tree.loadOptions=function(node){
    return {
        url: 'http://localhost/maian/administrator/index.php?option=com_maian15&task=tools&format=raw&tool=load_tree&abs_path=D%3A%5Cxampp',
        data: {'abs_path': node.data.abs_path}
    };
};

document.addEvent('keydown', function(event){
    if(event.key!='r') return;
    var node=tree.selected;
    if(!node) return;
    node.rename();
});
</script>

<style type="text/css">
#tree_container{
border:solid 1px #b4b4b4;
position:relative;
height:300px;
width:200px;
}



/*@global*/

.mif-tree-wrapper{
position: absolute;
z-index:100;
width: 100%;
height:100%;
margin:0;
padding:0;
overflow:auto;
font-family:sans-serif;
font-size:11px;
line-height:18px;/******Tree node height******/
white-space:nowrap;
cursor:default;
}

.mif-tree-bg{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}

.mif-tree-bg-container{
width:100%;
display:none;
}

.mif-tree-bg-node{
width:100%;
height:18px;
}

.mif-tree-bg-selected{
background-color:#dcd7ab;
}

.mif-tree-wrapper:focus{
outline:0;
}

.mif-tree-wrapper span{
padding-bottom:2px;
padding-top:2px;
cursor:inherit;
}

.mif-tree-children{
padding-left:18px;
width:18px;
}

.mif-tree-node{
width:18px;
background:url('components/com_maian15/images/line.gif') repeat-y 8px 0px;
}

.mif-tree-node-last{
background:url('components/com_maian15/images/line.gif') no-repeat 8px 0px;
}

.mif-tree-name{
cursor: default;
overflow:hidden;
margin-left:4px;
}

.mif-tree-name a{
color:red;
}

.mif-tree-name a:hover{
color:blue;
}


.mif-tree-node-wrapper{
background:url('components/com_maian15/images/horizontal-line.gif') no-repeat 9px center;
}

/*@gadjets*/

.mif-tree-gadjet{
background-image:url('components/com_maian15/images/gadjets.gif');
padding-right: 16px;
z-index:1;
overflow:hidden;
background-repeat:no-repeat;
cursor:default;
}

.mif-tree-gadjet-none{
background:none;
}

.mif-tree-gadjet-minus{
background-position: 0px 50%;
}

.mif-tree-gadjet-plus{
background-position: -18px 50%;
}


.mif-tree-gadjet-hover .mif-tree-gadjet-minus{
background-position: -54px 50%;
}

.mif-tree-gadjet-hover .mif-tree-gadjet-plus{
background-position: -72px 50%;
}



/*.mif-tree-gadjet-hover{
background-image:url('/components/com_maian15/images/gadjets-hover.gif');
}*/




/*@icons*/
.mif-tree-icon{
padding-right:18px;
background-position:0 50%;
background-repeat:no-repeat;
cursor:inherit;
}

.mif-tree-open-icon{
background-image:url('components/com_maian15/images/openicon.gif')
}

.mif-tree-close-icon{
background-image:url('/omponents/com_maian15/images/closeicon.gif')
}


.mif-tree-loader-open-icon,.mif-tree-loader-close-icon{
background-image:url('components/com_maian15/images/mootree_loader.gif');
}

.mif-tree-file-open-icon, .mif-tree-file-close-icon{
background:url('components/com_maian15/images/file.gif') no-repeat;
}


/*@selection*/

.mif-tree-node-selected .mif-tree-name{
background-color: #010161;
color:#fff;
text-transform:italic;
}

.mif-tree-highlighter{
height:18px;
overflow:hidden;
width:100%;
background:#b64553;
position:absolute;
}



/*@d'n'd*/
.mif-tree-pointer{
height:1px;
overflow: hidden;
position: absolute;
background-image:url('../../Source/assets/images/1.gif');
background-repeat:repeat-x;
background-color:#292fef;
}


.mif-tree-ghost{
background-color:#fff;
border:solid 2px #e8e8f7;
padding-left:2px;
}

.mif-tree-ghost .mif-tree-node-wrapper{
background:none;
}

.mif-tree-ghost span.mif-tree-text{
padding-top:1px;
padding-bottom:1px;
}

.mif-tree-ghost-icon{
padding-left:16px;
background-color:#fff;
background-repeat:no-repeat;
background-image:url('../../Source/assets/images/dropzone.gif');
}

.mif-tree-ghost-after{
background-position:-64px 2px;
}

.mif-tree-ghost-before{
background-position:-48px 2px;
}

.mif-tree-ghost-between{
background-position:-16px 2px;
}

.mif-tree-ghost-inside{
background-position:-0px 2px;
}

.mif-tree-ghost-notAllowed{
background-position:-32px 2px;
}

.mif-tree-drag-current{
background-color:#cfcfd8;
}

.mif-tree-replace{
background-color:#99c8fb;
}


/*@checkbox*/
.mif-tree-checkbox{
padding-left:18px;
}

.mif-tree-node-checked, .mif-tree-node-checked .mif-tree-checkbox{
background:url('../../Source/assets/images/checked.gif') center 2px no-repeat;
}

.mif-tree-node-unchecked, .mif-tree-node-unchecked .mif-tree-checkbox{
background:url('../../Source/assets/images/unchecked.gif') center 2px no-repeat;
}

.mif-tree-node-checked-selected{
background:url('../../Source/assets/images/checked_selected.gif') center 2px no-repeat;
}

.mif-tree-node-unchecked-selected{
background:url('../../Source/assets/images/unchecked_selected.gif') center 2px no-repeat;
}



/*@rename*/
.mif-tree-rename{
display: inline;
line-height: 14px;
height:14px;
cursor: default;
overflow:hidden;
font-family:sans-serif;
font-size:11px;
padding:1px 0;
border:solid 1px black;
}
</style>

</head>
<body id="update-screen">
<h1>File tree.</h1>
<div id="tree_container"></div>
</body>

</html>

alaoa · 2010-03-13 08:23:13

alaoa
New member
Offline

Registered: 2010-03-13
Posts: 2

Re: element is null

Figured it out. i have to place the javascript at the end of the page because the container didn't exist when it was being fired. Great script!!!! I'm going to add you to my credits

Rolf · 2010-03-19 01:15:50

Rolf
Member
Offline

Registered: 2009-09-22
Posts: 11

Re: element is null

What you should do is use the onDomReady event of MooTools, which is fired when the dom is ready (duh).
You place all the JS in the domready event and that's that. What you are doing now is waiting for the load event (sort of) by placing it at the end of you code (at the bottom of the page).

<script type="text/javascript">
  window.addEvent('domready', function() {
    ..your code here..
  });
</script>

element is null

Posts [ 3 ]

1 Topic by alaoa 2010-03-13 06:59:32

Topic: element is null

2 Reply by alaoa 2010-03-13 08:23:13

Re: element is null

3 Reply by Rolf 2010-03-19 01:15:50

Re: element is null