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 Apr 14 '14 at 21:20
  • Okay. Not too familiar with using the browser debugger, but I will see what I can find out with it. Thanks !! – Scott Guillot Apr 15 '14 at 16:04
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 !! – Scott Guillot Apr 15 '14 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 !! – Scott Guillot Apr 15 '14 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.... – Scott Guillot Apr 15 '14 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.