PDA

View Full Version : Can .innerHTML be used to display content from a XML generated treeview?



lms67
Oct 29th, 2009, 08:43 PM
This is what Iím doing: http://noteworthy.coffeecupstudios.com Ö

I am using dhtmlxtree and I would like to display the contents of the drag and drop treeview (pulled from an xml file) from the Build your Template section on the left to the WYSIWYG area on the right.

I thought that by using innerHTML to display onclick() to the div will solve my problem, but thatís not the case Ė When I click the preview template button, I get an undefined error. This is driving me crazy!!!

What am I doing wrong? Can someone point me in the right direction? Thanks for bearing with a newbie.

The innerHTML script:


function showText(){
var myTemplateholder = document.getElementById('myTemplateholder').value;
document.getElementById('showMe').innerHTML = myTemplateholder;
}


The build your template container Div:


<div id="myTemplateholder">
<div id="treeboxbox_tree" style="width:auto; height:218px;background-color:#DEF1F8;overflow:hidden">
</div>
</div>
<input name="Preview" type="button" class="submit" value="Preview Template" onclick="showText()" />



The XML File:


<?xml version="1.0" encoding="iso-8859-1"?>
<tree id="0" radio="1">
<item text="Sections" id="sections" >
<item text="History" id="history" >
</item>

<item text="ROS" id="ros" >
</item>

<item text="Exam" id="exam" >
</item>

<item text="ICD9" id="icd9" >
</item>
</item>
</tree>


And the WYSIWYG holding area:


<div id="showMe"><p>&nbsp;</p></div>

jmrker
Oct 29th, 2009, 09:18 PM
I don't think XML and .innerHTML are fully compatible yet (at least for most browser)
See: http://domscripting.com/blog/display/35

or do a 'google' with 'XML .innerHTML' for other discussions

rnd me
Oct 30th, 2009, 02:37 AM
going from xml > html is easy, and .innerHTML should work just fine.
the only snags would be a few tags like <title>, <html>, etc...
even then, it just displays funny, the DOM tree is fine.

going from HTML to XML is hard.
you have to turn close open HTML tags like <img> into <img />, and a some other, hard to fix problems.

your problem is actually that
document.getElementById('myTemplateholder').value
is not valid because a div has no .value...
i don't see your XML getting into the HTML in any code you posted, but given the non-competitive tag names in your xml file, it should drop in just fine once you get it working.


note that you can use CSS to style your tags:

item {display:block;}
item item {display:inline;}


IE refuses to recognize unknown tag names, but there is a workaround:

for each tag name, create an element of that name in javascript in the head:

<script>
document.createElement("item");
document.createElement("tree");
</script>

and now your tags will take css in all major browsers, just like "real" html!