jQuery / Dynatree: How to use Json or ul/li together with IFrame sample

Question

Hi I'm a newbie with dynatree, but happy that i've found this supercool plugin.

On the dynatree site, I've found an example how to use it with IFrames http://wwwendt.de/tech/dynatree/doc/sample-iframe.html

I was able to adapt the IFrame example successfully. But i'm a bit stuck here, because I'd like to load the tree either via UL/LI or better, with Jason/Ajax. my problem now is, that I dont understand how to provide ther url/links with LI or Jason, so that clicking an entry still opens the linked site in the iframe. Also don't know how I have to format parents/children/subchildren in Json..

Would anybody be so kind to give a sample with iframe and jason/ajax or iframe with ul/li?

Thanks a lot :-) G

Answer 1

First, I would suggest using the JavaScript object syntax rather than the UL/LI style, because it's more performant (drawback: the UL markup would be rendered, even if JavaScript is disabled).

The trick is, to simply add a custom attribute to the node data (in this example we may call it 'url') like so: {title: "Google", url: "http://www.google.com"}

Then, in the activation handler, access this attribute like this: dtnode.data.url.

Excerpt from the sample page ( http://wwwendt.de/tech/dynatree/doc/sample-iframe.html ):

$("#tree").dynatree({
      onActivate: function(dtnode) {
        // Use our custom attribute to load the new target content:
        if( dtnode.data.url )
          $("[name=contentFrame]").attr("src", dtnode.data.url);
      },
      children: [
        {title: "Search engines", isFolder: true, expand: true,
          children: [
            {title: "Google", url: "http://www.google.com"},
            {title: "Yahoo", url: "http://yahoo.com"}
          ]
        },
        {title: "jQuery", isFolder: true, expand: true,
          children: [
            {title: "jQuery", url: "http://www.jquery.com"},
            {title: "jQuery UI", url: "http://ui.jquery.com"},
            {title: "API browser", url: "http://api.jquery.com"},
            {title: "dynatree", url: "http://code.google.com/p/dynatree/"}
          ]
        }
      ]
    });

If you want to use an Ajax request, to receive this data from a server in JSON format, this sample - written in Python - may give a direction:

# Build node list as JSON formatted string:
res = "["
res += "{ 'title': 'Node 1', 'key': 'k1', 'isLazy': true, 'url': 'http://foo.com' },"
res += "{ 'title': 'Node 2', 'key': 'k2', 'isLazy': true, 'url': 'http://bar.com' }"
res += "]"

# Add support for the JSONP protocol:
# This means, if the request URL contains an argument '?callback=xxx',
# wrap the result as 'xxx(result)'
if "callback" in argDict:
    res = argDict["callback"] + "(" + res + ")"

# Make sure, content type is JSON:
start_response("200 OK", [("Content-Type", "application/json")])

# Return result (the square brackets are Python / WSGI specific):
return [ res ]

Note that in Ajax/JSON mode you don't have to return hierarchical structures. Instead, you may mark the nodes lazy, so another request is sent when the nodes are expanded for the first time.

Answer 2

Hehe, ok my first reply in Stackoverflow should be formatted, right ;-) 'Add comment' was the wrong button ;-) Here we go again:

thanks a lot for your help and time mar10 :-) Was finally able to got it running. Took me a bit to find out how to do the subfolders in json:

    [
       {
          "title":"Simple node",
          "key":"1"
       },
       {
          "title":"Folder 1 ",
          "isFolder":true,
          "url": "http://www.ggerri.com",
          "children":[
             {
                "title":"Simple node11",
          "children":[
          {
           "title":"Simple node111",
           "key":"3"
          }
          ]   
             },
             {
                "title":"Simple node12",
          "url": "http://jquery.com"
             }    
        ]
       },
       {
          "title":"Folder 2",
          "isFolder":true,
          "url": "http://www.ggerri.com",
          "children":[
....

Thanks again and take care :-) G