0

I have been working with the Fancytree jQuery plug-in written by Martin Wendt and it is fantastic. However, I've been struggling with one particular aspect. I'm using HTML rather than JSON for the data structure of the tree and discovered that it renders with missing nodes.

I spent a fair bit of time narrowing this down to the fact that the Fancytree control must be expecting a single <UL> structure. Anything else in the structure must be nested under <LI>. However I do not understand why. Let me explain.

Here is some sample HTML:

<div id="tree">
   <UL id="browser" class="filetree">
      <LI class="folder">
         Folder 1
         <UL>
            <LI>Nested Folder 1
               <UL>
                  <LI>Subitem1</LI>
                  <LI>Subitem2</LI>
               </UL>
            </LI>
         </UL>
         <UL>
            <LI>Nested Folder 2
               <UL>
                  <LI>Subitem1</LI>
                  <LI>Subitem2</LI>
               </UL>
            </LI>
        </UL>
      </LI>
   </UL>
</div>

When this HTML is rendered in IE, Chrome or pretty much any browser it correctly appears as two sequential unordered lists with nested items. However, when I apply Fancytree the node "Nested Folder 2" completely vanishes. In fact, there are no JavaScript errors or warnings from the plug-in framework.

Therefore, my question is somewhat two fold:

  1. Based upon W3C standards is the above properly formatted HTML syntax? I think yes.

  2. Why does the Fancytree not render the second folder? Is it a bug with Fancytree? Is there a customization I can easily do to get this to render?

My source for this HTML is dynamic and involves a rather complex XSLT so I'm hoping the answer is not to have to refactor the HTML structure.

I would greatly appreciate any insight that could be offered.

Warren Rox
  • 655
  • 2
  • 8
  • 23

1 Answers1

0

After continuing to drive forward with this effort I was able to answer my own questions.

Multiple <UL> elements

The HTML syntax of multiple <UL> elements in a row is indeed perfectly valid. However, when the data is structured in this format the second unordered list really becomes it's own entity. The entire point of the structure is to build something that can be completely represented as a single tree structure and therefore containing a single root element <UL> and child nodes. Of course the child nodes may have other children which become a nested unordered list <UL> with list items <LI>.

Here is an example:

  • Test
  • Another Test

FancyTree jQuery Plug-in

The FancyTree is working in this fashion by design based upon the answer outlined above.

Upon adjusting the XSLT to call individual templates housed in <UL> containers each XSL template would correctly add it's own list items as necessary. The end result is a tree view representative of the HTML data structure.

The one thing that also came to light was that the XSLT had to perform logically checks prior to rendering a node. The reason was that if the template did not have any list items to add to the structure the creation of the empty <UL> tripped up the tree view rendering. In this case it caused tree nodes to become children of the wrong parent element.

Warren Rox
  • 655
  • 2
  • 8
  • 23