javascript - Jstree nodes don't work when ui plugin is used

Question

I've found that using the ui plugin breaks the links for the tree nodes. This isn't anything new, I've found references to this problem elsewhere. The first cause was a problem with v1.6 of the jquery validation plugin. I'm not using that plugin, so that can't be the cause.

I also found a good posting describing a few ways of adding the jstree-clicked class to the <a> tag. That 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 take out the ui plugin, then clicking the link takes me to yahoo.com as expected. Does anyone have any ideas?

Answer 1

I think I found the answer on the jstree discussion group. I believe that the ui plugin allows the nodes to be "selected", but the click doesn't pass through to the anchor tag. So, I have to bind a function to be executed whenever a node is selected. I accomplished this with a .bind like the following:

  .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 a side benefit, this example also showed me how easy it is to click on a tree node and show dynamic contents in another div. For example, suppose the tree node was defined as follows (using html_data jstree plugin and struts2):

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

Clicking on that tree node will cause the do-something action to be executed, and the results will be displayed in the div with the id "contents".