How to make hyperlinks in dynaTree jQuery plugin available?

Question

I am currently using the dynaTree jQuery plugin to render a tree.

<div id="tree" style="height:100px;"> <ul class="expanded"> <li class="expanded" id="shtml_1" > <a class="ajaxify" href="jsTree.html" >Root node 1</a> <ul> <li id="shtml_2"> <a href="#">Child node 1</a> <ul> <li id="a"><a href="#">Child node 1-1</a></li> <li id="x"><a href="b">Child node 1-2</a></li> </ul> </li> <li id="c"><a href="#">Child node 2</a></li> </ul> </li> <li id="shtml_4"> <a href="#">Root node 2</a> </li> </ul> 

Javascript -

  $('.ajaxify').ajaxify({ target: '#container' }); $(function(){ $("#tree").dynatree({ title: "Sample Theming", // Image folder used for data.icon attribute. imagePath: "skin-custom/", onSelect: function(node) { alert ("You selected " + node); } }); }); 

Now I want

• Use the jQuery Ajaxify plugin (http://max.jsrhost.com/ajaxify/demo.php), so when a user clicks on any node, an ajax call is created and the results are loaded into a div.

or

• Bind anchor tags with jquery so that I can do onclick ajax requests.

Now when I use dynaTree, it overrides the default behavior and does not allow the anchor tag to be attached. Any thoughts on how this can be done?

Answer 1

Dynatree will remove the <a> tags by default, so it may be easier to implement the onActivate handler:

 onActivate: function(node) { if( node.data.href ){ // use href and target attributes: window.location.href = node.data.href; // window.open(node.data.href, node.data.target); // $("#div").load(node.data.href); } } 

Starting with version 1.1.2, Dynatree will use the href and target attributes directly from the <a> tag:

 <li id="x"><a href="b">Child node 1-2</a></li> 

In older versions, you should install href as follows:

 <li id="x" data="href: 'b'"><a href="b">Child node 1-2</a></li>