Question

I was trying out the Treeview from jQuery on my Visualforce page and for some reason it is not working.

Here is the relevant code.

          <apex:outputPanel id="invisibleSection" layout="block" styleClass="invisibleSectionClass">
          <script type="text/javascript">
          $("#browser").treeview();
           document.write('hi');
                $(document).ready(function() {
                        $("#navigation").treeview({
                        persist: "location",
                        collapsed: false,
                        animated: "medium"
                         });
                });

          </script>
          <ul id="browser" class="filetree">
            <li><span class="folder">Folder 1</span>
                <ul>
                    <li><span class="file">Item 1.1</span></li>
                </ul>
            </li>
            <li><span class="folder">Folder 2</span>
                <ul>
                    <li><span class="folder">Subfolder 2.1</span>
                        <ul id="folder21">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="file">File 2.2</span></li>
                </ul>
            </li>
            <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>

I put the document.write('hi'); to check if the javascript section was even being called and it is being printed. Therefore something else is wrong I think. I have included Treeview(zip file) as a static resource.

So what am I doing wrong for this not to work.

<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}"/>

<apex:stylesheet value="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}" />

UPDATE based on John’s suggestion below:

  $(document).load(function () {

             $("#browser").treeview();

             $("#navigation").treeview({
                        persist: "location",
                        collapsed: false,
                        animated: "medium"
                         });

            });  

Answer 1

At first glance it appears that you might need to move your script tag below the UL tag. Because it is an inline script tag the DOM might not be aware of the UL id “browser” at the point that script runs. I would even go so far as to move the $("#browser").treeview(); inside of the document.load method. This will ensure that the code is called after the page is done rendering and the DOM is established.