Hi,

  Did you get the answer for it ?If you are then please share it because now am also facing same problem.

---

Adi85 wrote:

Hi All,

 

Am trying to get a tree view in my VF page using JQuery tree view plugin. But the tree is coming a by default extracted manner nad not able to collapse it and throwing the exception like "Object does not support this property or method". Here is my code.

 

VF page:

--------------

 

<apex:page controller="treeViewController">

<script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>

<script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>

<script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>

<script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/lib/jquery.js')}" type="text/javascript"></script>

<script type="text/javascript">

        $(function() {

            $("#tree").treeview({

                collapsed: false,

                animated: "medium",

                control:"#sidetreecontrol",

                persist: "location"

            });

        })

</script>

<br/> <br/> <br/>

<!-- Tree -->

<div class="treeheader" style="height:0px;">&nbsp;</div>

<div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div>

<ul id="tree">

    <apex:repeat value="{!mainnodes}" var="parent">

        <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>

             <ul>

                 <apex:repeat value="{!parent.parent}" var="child">

                    <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>

                        <ul>

                            <apex:repeat value="{!child.Cases}" var="gchildren">

                               <li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;<apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>

                            </apex:repeat>

                        </ul>       

                    </li>

                 </apex:repeat>  

             </ul>  

        </li>

    </apex:repeat>

</ul>

<!-- End of Tree -->

</apex:page>

 

-------------------

controller:

----------------------

 

 

public class treeViewController {

 

/* Wrapper class to contain the nodes and their children */

public class cNodes

{

 

 public List<Contact> parent {get; set;}

 Public Account gparent {get;set;}

 

 public cNodes(Account  gp, List<Contact> p)

 {

     parent = p;

     gparent = gp;

 }

}

/* end of Wrapper class */ 

 

Public List<cNodes> hierarchy;

 

Public List<cNodes> getmainnodes()

{

    hierarchy = new List<cNodes>();

    List<Account> tempparent = [Select Id,Name from Account];

    for (Integer i =0; i< tempparent.size() ; i++)

    {

        List<Contact> tempchildren = [Select Id,FirstName,LastName,(Select Id,CaseNumber,Subject from Cases) from Contact where AccountId = :tempparent[i].Id];

        hierarchy.add(new cNodes(tempparent[i],tempchildren));

     }   

    return hierarchy;

}   

}

 

 

 

Please suggest me how i can overcome this issue. i think the problem is with the line  "$(function() {" because SFDC also uses the same type of patterns to use javascript resources. 

 

In one of my samples i used like 

 

var j$ = jQuery.noConflict();

j$(function() {

//my code

}

 

But here if am trying to use the same sysntax it is not recognizing the method "treeview". Sp please help me to resolve this issue.

 

Thank you in advance.

 

Regards,

 

Aditya.p.

<apex:page controller="treeViewController"><script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}" type="text/javascript"></script><script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script><script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script><script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/lib/jquery.js')}" type="text/javascript"></script><script type="text/javascript">        $(function() {            $("#tree").treeview({                collapsed: false,                animated: "medium",                control:"#sidetreecontrol",                persist: "location"            });        })</script><br/> <br/> <br/><!-- Tree --><div class="treeheader" style="height:0px;">&nbsp;</div><div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div><ul id="tree">    <apex:repeat value="{!mainnodes}" var="parent">        <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>             <ul>                 <apex:repeat value="{!parent.parent}" var="child">                    <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>                        <ul>                            <apex:repeat value="{!child.Cases}" var="gchildren">                               <li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;<apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>                            </apex:repeat>                        </ul>                           </li>                 </apex:repeat>               </ul>          </li>    </apex:repeat></ul><!-- End of Tree --></apex:page>

---