Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by titi on Aug 10, 2009 06:36
open dhtmlx forum
problem with loadXML()

I do exactly as the documentation said, and copy the code from example
xml file loaded from harddisk works fine, however, the one loaded from remote http server has problems.
never get the xml done and show up in the tree component. please help

the codes are as follows :
            tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
            tree.setImagePath("codebase/imgs/csh_bluebooks/");
            
            tree.enableDragAndDrop(true);
            tree.enableCheckBoxes(true);

            tree.setOnOpenHandler(onOpen);
            tree.attachEvent("onOpenEnd",function(nodeId, event){doLog("An id of open item is "+ nodeId);});
            tree.setOnClickHandler(onClick);
            tree.setOnCheckHandler(onCheck);
            tree.setOnDblClickHandler(onDblClick);
            tree.setDragHandler(onDrag);

            tree.setXMLAutoLoading("http://localhost:8000/test/default/tree");
            tree.loadXML("http://localhost:8000/test/default/tree");//load root level from xml #problem!
            // tree.loadXML("tree3.xml"); //this line works



I use dhtmlxtree standard version.
I guess it is not necessary to be professional version to have it run ?
Answer posted by Alex (support) on Aug 10, 2009 06:42

It is possible to loaded xml from the same domain as the page with tree (browser's security).

Please, check that page is loaded from localhost too: 

http://localhost:8000/....

Answer posted by tt on Aug 10, 2009 19:12

I setup a local webserver for test, http://localhost:8000/test/default/tree lookss just fine in browser, either IE or Firefox.

 

Answer posted by tt on Aug 10, 2009 19:19

the full  html code is attached below:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A demo</title>
<style type="text/css">
html, body {
  font-family: Verdana,sans-serif;
  background-color: #fea;
  color: #000;
}
a:link, a:visited { color: #00f; }
a:hover { color: #048; }
a:active { color: #f00; }

textarea { background-color: #fff; border: 1px solid 00f; }
</style>
<script  src="codebase/dhtmlxcommon.js"></script>
<script  src="codebase/dhtmlxtree.js"></script>
<script  src="codebase/dhtmlxtree_start.js"></script>
</head>

<body >

<input type="text" value="节点标题" id="ed1">
<a href="javascript:void(0);" onClick="var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('ed1').value);">更新</a>
<a href="javascript:void(0);" onClick="var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());">插入子节点</a>
<a href="javascript:void(0);" onClick="var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());">插入兄弟节点</a>
<a href="javascript:void(0);" onClick="tree.deleteItem(tree.getSelectedItemId(),true);">删除!</a>
<table>
    <tr>
        <td>
<div id="treeboxbox_tree" style="width:250; height:500;background-color:#f5f5f5;border :1px solid Silver;">

</div>
        </td>
        <td>
<div id="htmlarea"
 style="width:1000; height:500;background-color:#f5f5f5;border :1px solid Silver;"
 >
         <xmp>
       
                <item text="Account Statements" select="1" open="1" id="2" im0="folderClosed.gif">
                    <item text="January 2008" id="3"/>
                    <item text="February 2008" id="4"/>
                </item>
               
                <item text="Tax Documents" select="1" open="1" id="7" im0="folderClosed.gif">
                    <item text="2007 Form K-1" id="8"/>
                    <item text="2008 Form K-1" id="9"/>
                </item>
               
                <item text="Quarterly Reports" select="1" open="1" id="10" im0="folderClosed.gif">
                    <item text="Q3 2008 Report.pdf" id="11"/>
                </item>
               
                <item text="Audited Financial Statements" select="1" open="1" id="12" im0="folderClosed.gif">
                </item>
               
                <item text="Offering Documents" select="1" open="1" id="13" im0="folderClosed.gif">
                </item>
               
                <item text="Other Documents" select="1" open="1" id="14" im0="folderClosed.gif">
                </item>          
           
        </xmp>
    
</div>
        </td>
    </tr>
<tr><td colspan="2"><div id="logarea" style="background-color:lightgrey;height:16px;width:250px; padding:1px; overflow:auto;"></div></td></tr>  
</table>
 <script>
  //
   tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
   //tree =  dhtmlXTreeFromHTML('htmlarea'); //from html code in the same file
   
   tree.setImagePath("codebase/imgs/csh_bluebooks/");
   
   tree.enableDragAndDrop(true);
   tree.enableCheckBoxes(true);
   //tree.enableItemEditor(true);  // pro version
   //tree.setOnEditHandler(m_func);

   tree.setOnOpenHandler(onOpen);
      tree.attachEvent("onOpenEnd",function(nodeId, event){doLog("An id of open item is "+ nodeId);});
   tree.setOnClickHandler(onClick);
   tree.setOnCheckHandler(onCheck);
   tree.setOnDblClickHandler(onDblClick);
   tree.setDragHandler(onDrag);


   tree.setXMLAutoLoading("http://localhost:8000/test/default/tree");
   tree.loadXML(); //"http://localhost:8000/test/default/tree");  //load xml from http server failed
   //tree.loadXML("tree3.xml");   //load local xml file is okay
   

            function doLog(str){
    var log = document.getElementById("logarea");
    log.innerHTML = str ;//log.innerHTML+str+"</br>"
    //log.scrollTop = log.scrollHeight;
   }
   function onDrag(id,id2){
    doLog("Item "+tree.getItemText(id)+" was dragged to" + tree.getItemText(id2));
    //return confirm("Do you want to move node "+tree.getItemText(id)+" to item "+tree.getItemText(id2)+"?");
    //tree.moveItem(nodeId,mode,targetId);  //
    return true // // return true is required, otherwize it can not be dropped
            }
            function onDrop(idFrom,idTo){
                doLog("Item "+tree.getItemText(id)+" was dropped to " + idTo);
                return true;
            }
            function onClick(id){
   
    doLog("Item "+tree.getItemText(id)+" was selected");
    return true;

            }
            function onOpen(id,mode){
             
             doLog("Item "+tree.getItemText(id)+" was " +(mode>0?"close":"open"));
             return true;  // return true is required, otherwize it can not be collapsed
               
            };
            function onCheck(id,state){
    doLog("Item "+tree.getItemText(id)+" was " +((state)?"checked":"unchecked"));
   
   };
            function onDblClick(id){
   
    doLog("Item "+tree.getItemText(id)+" was doubleclicked");
   
   };   
 </script>
</body>
</html>

Answer posted by Alex (support) on Aug 11, 2009 02:26

How do you open page that code you have provided ? 

Is it opened by http://localhost:8000/.... in browser ?

Answer posted by tt on Aug 11, 2009 18:43
this html is called editor.html, which is sent by the web server to the browser.
it is opened by "http://localhost:8000/test/default/editor" in browser, and locally from harddisk in browser as well. either way is okay.

"http://localhost:8000/test/default/tree", which loads tree.xml from the server side, is also okay in browser, but fail in the code.

Answer posted by Alex (support) on Aug 12, 2009 02:53
Please, provide the complete sample with detailed instructions to re-create the issue locally.
Answer posted by tt on Aug 12, 2009 04:17
in a word, editor.html and tree3.xml are in the same folder.

1. when editor.html is visited locally by double-clicking the file, it successfully loads tree3.xml,
I can see the tree in div, named "treeboxbox_tree", at left side of the page.

2.when editor.html is visited from http server, it fail to load tree3.xml, nothing appears in "treeboxbox_tree" div.

by the way, today I insert two alert()s as follows:
            alert("1");
            tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
            alert("2");
            tree.setImagePath("codebase/imgs/csh_bluebooks/");
            ....

it is very interesting that,
1. when visiting the editor.html from http server, alert("1") showed, whereas alert(2) didn't show up.
2. when visiting the editor.html locally double-clicking, both alert("1") and alert(2) showed.

it seems that the line "tree=new dhtmlXTreeObject(...)" failed so that the program ceased.
Answer posted by Alex (support) on Aug 12, 2009 05:19

Please, provide the complete demo.

Answer posted by tt on Aug 12, 2009 20:26
i attach the whole demo as .zip to this post, simply it contains just editor.html and a subfolder named "codebase" with the .js files.
Attachments (1)
default.zip131.24 Kb
Answer posted by tt on Aug 12, 2009 22:01
Dear Alex , I have solved the problem myself, it is because the web server does not allow directly access such static files as .js or .png under certain folders.
I change the folder, and now it seems okay.

but here raises another question that, as you can see in my code
1 tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
2 // tree =  dhtmlXTreeFromHTML('htmlarea'); //from html code in the same file

the 2nd line retrieves html/xml code from 'htmlarea' div and generate a tree in the same div.
so the question is, is there another way, to retrieve html/xml code from 'htmlarea' div and generate a tree in ANOTHER div, 'treeboxbox_tree' for instance.
and, keep the 'htmlarea' div untouched as it was at the same time?

Answer posted by Alex (support) on Aug 13, 2009 02:00

Hello, 

>>  is there another way, to retrieve html/xml code from 'htmlarea' div and generate a tree in ANOTHER div, 'treeboxbox_tree' for instance.

Tree doesn't support this feature. You can create to identical containers and one of them can be used for tree initialization. 

it is possible to initialize tree in the another container, but in this case we need made a modifications in the dhtmlxtree_start.js (they won't be supported and included into official version). If you need this modification, let us know and we try to help. 

Answer posted by tt on Aug 13, 2009 06:36
of course we need that thing.
but I think there must be another way, today I saw there is a method named  loadXMLString().
this may load a XML string, and send the string to the tree and the htmlarea div at the same time.

thank you for patient help along the way.

Answer posted by Alex (support) on Aug 13, 2009 06:49

Yes, loadXMLString can be also used. But you should add the root node to the xml string when you use it:

    tree.loadXMLString("<tree id='0'>"+xml_content+"</tree>");