admin管理员组

文章数量:1323342

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(.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?

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./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?

Share Improve this question edited May 20, 2011 at 15:57 Pushkar asked May 20, 2011 at 10:18 PushkarPushkar 7,59010 gold badges40 silver badges58 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 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>

本文标签: javascriptHow to make hyperlinks in dynaTree jQuery plugin clickableStack Overflow