5

I am currently using 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 to

  • Use the jQuery Ajaxify plugin(http://max.jsrhost.com/ajaxify/demo.php) so that when user clicks on any node a ajax call gets made and the results loaded in a div.

Or

  • Bind the anchor tags with jquery so that i can make onclick ajax requests.

Now whenever i use dynaTree it overrides the default behavior and prevents the anchor tag from being click able. Any thoughts on how this can be done?

Pushkar
  • 6,990
  • 9
  • 35
  • 57

1 Answers1

8

Dynatree will by default remove the <a> tags, so it is possbly 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 release 1.1.2, Dynatree will use 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 have to set href like so:

<li id="x" data="href: 'b'"><a href="b">Child node 1-2</a></li>
mar10
  • 11,918
  • 5
  • 35
  • 58
  • Thanks. Any thoughts how we can integrate it with a plugin like Ajaxify? – Pushkar May 22 '11 at 08:42
  • I never used Ajaxify, but I spotted a Demo on their page ('Interacting with other plugins' - 'Flexigrid') that may point to an aproach. – mar10 May 27 '11 at 05:57
  • Unfortunately it does not work with dynaTree. So i had to drop the idea of using Ajaxify altogether and use dierect ajax calls in onActivate method of dynaTree – Pushkar May 27 '11 at 06:52
  • +1 for the version comment (that href from the a tag is not supported in 1.1.1, which isn't in the documentation). – matt Aug 30 '11 at 21:19