Use URL's (anchors) to specificy node-click action (no event-handling code required)

[GoogleCodeExporter]

I propose a feature to respond to node-click events without having to write
event-handling code but rather use URL's.

The idea (at least for HTML initialization) is that if you include anchors
<a> inside a <li> then the tree should use that anchor as the click-event
action on the tree node.

This would make creating a tree from html easier and be less work as no
event-handling code is required to make the tree fully functional.
Also, the tree then degrades to non-javascript browsing, because the
UnorderedList works as it is.

However, there's no reason not to use this feature with other
initialization types, as does CoolTree.js (and old nonjquery javascript
tree) - where you initialize a tree using javascript arrays like this:
 ['Folder', null, null,  {format:{expanded:true}},
    ['Bla', 'a_bla.html', 'main'], <- main is the name of the frame

For HTML initialization it would look something like this:
<div id="mytree">
<ul>
    <li> <a href="somepage.html" target="main">Some Page</a> </li>
</ul>
</div>

With this HTML, we would then just call: $('.folder').dynatree();
And that's it. The tree would be fully functional & node clicks will open
the specified anchor URL in the specified frame.

Original issue reported on code.google.com by spurrymo...@gmail.com on 8 Mar 2010 at 12:22

[GoogleCodeExporter]

sorry the jquery call should read-> $('#mytree').dynatree();

Original comment by spurrymo...@gmail.com on 8 Mar 2010 at 12:23

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 21 Nov 2010 at 7:27

• Changed state: Accepted
• Added labels: Milestone-Discussion

[GoogleCodeExporter]

I strongly add my support to this idea. To me it makes no sense to swallow 
legitimate anchor links in order to use a rather convoluted and non-standard 
markup. 

Besides that, there seems to be interference between the persistence mechanism 
and using the onActivate(node) method that use urls: when I try to use the 
recommended code to open a new page, ie, {if( node.data.url ) 
window.location.href = node.data.url;}, then persistence fails, as the cookie 
is still pointing to the previous page.

I've tried various workarounds such as the onPostInit call referenced in the 
documentation, but nothing seems to fix the problem.

Original comment by Uroboro...@gmail.com on 25 Jan 2011 at 6:11

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 19 May 2011 at 5:37

• Added labels: Milestone-Release1.1.2
• Removed labels: Milestone-Discussion

[GoogleCodeExporter]

Dynatree now parses 'href' an 'target' attributes if an <a> tag follows the 
<li>.
So we can use it like so:

    onActivate: function(node) {
        if( node.data.href ){
            // Open target
            window.open(node.data.href, node.data.target);
            // or open target in iframe
//          $("[name=contentFrame]").attr("src", node.data.href);
        }
    }

If JavaScript is disabled, the links are still functional.

      <div id="tree">
      <ul>
        <li class="expanded folder">Search engines
        <ul>
          <li><a href="http://www.google.com" target="_blank">Google</a>
          <li><a href="http://www.bing.com" target="_self">Bing</a>
          <li><a href="http://www.wolframalpha.com/">WolframAlpha</a>
        </ul>
        <li class="expanded folder">jQuery
        <ul>
          <li><a href="http://www.jquery.com/">jQuery</a>
          <li><a href="http://ui.jquery.com/">jQuery UI</a>
          <li><a href="http://api.jquery.com/">API browser</a>
          <li><a href="http://code.google.com/p/dynatree/">Dynatree</a>
        </ul>
        <li class="expanded folder">Misc
        <ul>
          <li><a href="sample-iframe-1.html">Welcome</a>
        </ul>
      </ul>
      </div>

Original comment by moo...@wwwendt.de on 19 May 2011 at 6:57

• Changed state: Started

[GoogleCodeExporter]

This issue was closed by revision r490.

Original comment by moo...@wwwendt.de on 19 May 2011 at 7:34

• Changed state: Fixed

[GoogleCodeExporter]

Release 1.1.2 is rather a feature release 1.2.0

Original comment by moo...@wwwendt.de on 6 Jun 2011 at 5:34

• Added labels: Milestone-Release1.2

[GoogleCodeExporter]

I use onCustomRender() to return a 'title' that contains several <a> tags, and 
hope to set 'noLink' node-option to 'true' to prevent the default action, so I 
can click on each <a> to open the specified url.
The documentation says "The 'noLink' node-option is used for single nodes to 
make the form and HTML5 elements clickable.", I think it should work for <a> 
tags too.
I have to modify dynatree code to make it work: 
in _onClick(), change
if(aTag[0])
to
if(!this.data.noLink && aTag[0])

Is there any other way?

Original comment by jimmy...@gmail.com on 22 Nov 2011 at 6:32

[GoogleCodeExporter]

considered verified

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:16

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:19

• Changed state: Verified