I nodi Jstree non funzionano quando si utilizza il plug-in ui

Question

Ho scoperto che l'uso del plug-in ui interrompe i collegamenti per i nodi dell'albero. Questo non è niente di nuovo, ho trovato riferimenti a questo problema altrove. La prima causa era un problema con la v1.6 del plugin di validazione jquery. Non sto usando quel plugin, quindi non può essere la causa.

Ho trovato anche un buon post che descrive alcuni modi per aggiungere la classe jstree-click al tag <a>. Sembrava promettente, ma quando l'ho provato non ho notato alcuna differenza. Ecco un esempio molto semplice:

<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> 

Se prendo il plugin ui, quindi facendo clic sul link che mi porta a yahoo.com come previsto. Qualcuno ha qualche idea?

Answer 1

Penso che I found the answer on the jstree discussion group. Credo che il plugin ui permetta ai nodi di essere "selezionati", ma il click non passa attraverso il tag di ancoraggio. Quindi, devo associare una funzione da eseguire ogni volta che viene selezionato un nodo. Ho compiuto questo con un .bind come la seguente:

.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; 
    }) 

Come beneficio collaterale, questo esempio mi ha mostrato anche quanto sia facile fare clic su un nodo della struttura e mostrare contenuti dinamici in un altro div. Per esempio, supponiamo che il nodo della struttura è stata definita come segue (utilizzando plugin di html_data jstree e Struts2):

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

Cliccando su quel nodo della struttura farà sì che l'azione di do-qualcosa da eseguire, ed i risultati saranno visualizzati in il div con l'id "contenuti".