[SalesForce] Loading Dynatree Jquery library in Visualforce

I am trying to learn more about DynaTree tree control and I am just having no luck. I am an admitted beginner, but enough about my crutch. 🙂

I have successfully added the DynaTree control to my resources and I am fairly confident that I have it done correctly because the image tag in the page code below displays the right image. But, the tree control? Nah, can't get it to display anything.

<apex:page >
<!-- jQuery files -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<!-- DynaTree files -->
    <apex:includeScript value="{!(URLFOR($Resource.DynaTree, 'jquery.dynatree.js'))}" />
    <apex:stylesheet value="{!(URLFOR($Resource.DynaTree, 'skin/ui.dynatree.css'))}" />

<!-- Begin Default Content REMOVE THIS -->
<h1>Yip Dee Do !!  </h1>
This is your new Page
<!-- End Default Content REMOVE THIS -->

<script>
$(function(){  // Attach the dynatree widget to an existing <div id="tree"> element
               // and pass the tree options as an argument to the dynatree() function:

    $("#tree").dynatree({
                     children: [ {title: "Item 1"},
                                 {title: "Item 3"}
                               ]
                       });
           });
</script>

<body>
    <div id="tree"> </div>
    <img src="{!(URLFOR($Resource.DynaTree, 'skin/icons.gif'))}" />
</body>

</apex:page>

Help? Advice?

Thanks in advance….

-Scott.

Best Answer

Some Jquery + salesforce Lessons:

1) Read this doc :

http://developer.force.com/cookbook/recipe/using-jquery-in-a-visualforce-page

2) Jquery uses$ variable, so use j$ in salesforce 

$j = jQuery.noConflict();

3) Load your static resources and reference them individually.

Create 4 resources

1) Download JqueryUI from here (http://jqueryui.com/download/) extract the contents to a folder.

2) Create 1 static resource name it DynaTreeJQjs Go to the extracted Jquery folder choose jquery.js from Js folder ( it could be named as jquery-1.10.2 depending on version number)

3) Create 2 static resource name it DynaTreeCustomjs Go to extracted Jquery folder choose jquery.custom.js from Js folder ( it could be named as jquery-1.10.2.custom depending on version number, do not choose the one ending with .min)

4) Create 3 static resource name it DynaTreeCookiejs Download the Jquery dynatree from here https://code.google.com/p/dynatree/downloads/list extract the contents to a folder and name it Jquerydynatree Go to the folder and in the Jquery choose Jquery.cookie Javascript file.

5) Create 4 static resource name it DynaTreejs

Go to the folder Jquerydynatree and in the SRC folder choose Jquery.dynatree.js Javascript file.

6) Create 5 static resource name it DynaTreecss

Go to the folder Jquerydynatree /src/skin and choose ui.dynatree.css stylesheet file

Copy paste the code below in your visualforce page:

<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
<!-- jQuery files -->

<apex:includeScript value="{!(URLFOR($Resource.DynaTreeJQjs))}"/>
<apex:includeScript value="{!(URLFOR($Resource.DynaTreeCustomjs))}"/>
<apex:includeScript value="{!(URLFOR($Resource.DynaTreeCookiejs))}"/>


<!-- DynaTree files -->
    <apex:includeScript value="{!(URLFOR($Resource.DynaTreejs))}" />
    <apex:stylesheet value="{!(URLFOR($Resource.DynaTreecss))}" />

<script type="text/javascript">
$j = jQuery.noConflict();

    $j(function(){
        // Attach the dynatree widget to an existing <div id="tree"> element
        // and pass the tree options as an argument to the dynatree() function:
        $j("#tree").dynatree({
            onActivate: function(node) {
                // A DynaTreeNode object is passed to the activation handler
                // Note: we also get this event, if persistence is on, and the page is reloaded.
                alert("You activated " + node.data.title);
            },
            persist: true,
            children: [ // Pass an array of nodes.
                {title: "Item 1"},
                {title: "Folder 2", isFolder: true,
                    children: [
                        {title: "Sub-item 2.1"},
                        {title: "Sub-item 2.2"}
                    ]
                },
                {title: "Item 3"}
            ]
        });
    });
    </script>

<body>
    <!-- Add a <div> element where the tree should appear: -->
    <div id="tree"> </div>
</body>

</apex:page>

You should see something like this and from this basic you can grow you tree as you like it :D

enter image description here

Related Topic