Jstree nodes do not work when ui plugin is used

Question

I found that using the ui plugin breaks links to tree nodes. This is not new, I found links to this problem elsewhere. The first reason was a problem with the jquery validation plugin v1.6. I do not use this plugin, so this cannot be the reason.

I also found a good post describing several ways to add the jstree-clicked class to the <a> tag. It looked promising, but when I tried it, I didn't notice any difference. Here is a very simple example:

 <div id="treediv"> <ul> <li id="page1"><a href="http://www.yahoo.com" class="jstree-clicked">YAHOO!</a></li> </ul> </div> <script type="text/javascript" class="source"> $(function () { $("#treediv") .jstree({ "core" : { "animation" : 0 }, "themes" : { "theme" : "classic" }, "plugins" : [ "themes", "html_data", "cookies", "ui" ] }); }); </script> 

If I pulled out the ui plugin, then clicking the link will lead me to yahoo.com, as expected. Does anyone have any idea?

Answer 1

I think I found the answer in the jstree discussion group . I believe that the ui plugin allows you to “select” nodes, but the click does not go to the anchor tag. Therefore, I need to bind a function that will be executed whenever a node is selected. I accomplished this with .bind as follows:

  .bind("select_node.jstree", function (e, data) { var href = data.rslt.obj.children("a").attr("href"); // this will load content into a div: $("#contents").load(href); // this will follow the link: document.location.href = href; }) 

As an added benefit, this example also showed me how easy it is to click on a node tree and show dynamic content in another div. For example, suppose the node tree was defined as follows (using the html_data jstree plugin and struts2):

 <li id="node1"> <a href="do-something.action">Do Something</a> </li> 

Clicking on this node tree will execute the do-something action and the results will be displayed in a div with the id content.