1

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.

2
  • The main thing when using a lot of client-side JavaScript is to get comfortable with your browser's development tools. For example, in Chrome when you open Tools -> Developer Tools you get a "Console" tab that will show any JavaScript errors (plus you can add console.log calls to your JavaScript and see the output there) and a "Network" tab that will show you any failures to find a resource such as a JavaScript library file. (There is a full-blown debugger with breakpoints too.) You can then make reasoned changes to your code based on the problems you see.
    – Keith C
    Commented Apr 14, 2014 at 21:20
  • Okay. Not too familiar with using the browser debugger, but I will see what I can find out with it. Thanks !! Commented Apr 15, 2014 at 16:04

1 Answer 1

2

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

3
  • Okay. I have seen the $j = jQuery.noConflict(); before, but I never understood it. The article really does help explain that. Thanks !! Commented Apr 15, 2014 at 16:06
  • I was trying to avoid loading jQuery as a resource, that is why I was referencing it via the googleapis link. Previous examples that I have explored used this method and they worked for me when I was exploring them. But, using the browser debugger suggestion Keith C above seems to be telling me that it is not finding or loading jQuery so I think I will try loading them as resources. Also, the DynaTree package I loaded was the 1.2.5-dist zip and it did not have jQuery in it. The 'all' package does, so I think I will d/l that one and see how much further I can press on. Thanks again !! Commented Apr 15, 2014 at 16:10
  • 1
    An Update: Success! The issue was a missing 'apex:includeScript' line to load/include the jQuery Cookie script. I did implement the 'var j$ = jQuery.noConflict()' because it seems like it is just best practice. Now I have DynaTree 1.2.5 running using jQuery v1.11.0, jQuery UI v1.10.4 and jQuery Cookie v1.4.0. I have not tried using the jQuery 2.x line of files. I may try them, I may not.... Commented Apr 15, 2014 at 21:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .