Link albero JS non attivo

Question

Sono nuovo di Jquery e JS Tree ma sto imparando ad amarlo. Ho impostato su un menu ad albero usando php generato xml (vedi codice sotto). Funziona come previsto con una eccezione: i collegamenti non sono attivi.

So che c'è qualcosa di fondamentale che non capisco. Breve termine I solo desidera che i collegamenti funzionino come collegamenti normali. A lungo termine li voglio a innescare una chiamata Ajax che ricaricherà un div specifico sulla pagina.

Qualcuno può indicarmi la giusta direzione? Grazie molte per l'aiuto!

$(function() { 
     $("#mainMenu").jstree({ 
       xml_data : { data : <?php $menu->deliver(); ?> }, 
       core : { animation : 1000 } 
       ui : { select_limit : 1, selected_parent_close : false }, 
       themes : { theme : "default", dots : true, icons : false }, 
       types : { types : { "heading" : { select_node : true } } }, 
       plugins : [ "themes", "xml_data", "ui", "types" ] 
     }); 
}); 

Esempio XML (singolo articolo):

"<root><item id='pubPages_home' parent_id='0'><content><name href='? 
a=pubPages&amp;f=home'>Public Home</name></content></item><root>" 

Answer 1

penso che è necessario scrivere in modo esplicito il gestore click per i collegamenti dei nodi dell'albero. JsTree prende l'evento click per se stesso e non lascia che passi alla pagina di reindirizzamento.

vorrei provare ad andare in questo modo:

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
}); 

Answer 2

So che questo è vecchio, ma sono venuto qui in cerca di una soluzione rapida. Lubor Bílek è per lo più corretto, ma ricorda che jsTree vincolerà il genitore <li> dell'elemento di ancoraggio cliccato.

ho risolto questo facendo:

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
}); 

In questo modo, l'evento si legherà al bambino <a> del <li> al posto del <li> stesso, in modo che si può avere l'attributo href sulle ancore, invece di i tuoi articoli della lista.

Answer 3

Ho trovato un modo semplice.

$('#'+target).jstree({ 'core' : { 
    'data' : treeInfo 
} }); 

$(".jstree-anchor").click(function() 
{ 
    document.location.href = this; 
}); 

Ho trovato che il jstree utilizzava la classe "jstree-anchor" per le liste li. Quindi, posso trovare il link href da questo oggetto, posso creare questo link senza alcuna funzione di delimitazione.

Answer 4

provo questo codice:

window.location.href = data.rslt.obj.find('a').attr("href"); 

Si alzano data.rslt errore non definito, quindi non può ottenere href con essa!

Ecco il mio codice disponibili:

$("#mytree").bind("select_node.jstree", function(e, data) { 
    window.location.href = data.node.a_attr.href; 
}); 

è legato alla versione di jstree? La mia versione jstree: 3.0.0-bata10

Answer 5

  .bind("select_node.jstree", function (e, data) { 
       var href = data.node.a_attr.href 
       document.location.href = href; 
      }) ; 

versione jstree: "3.0.0" , jquery: ultima

aggiornamento: o modo migliore per me:

.bind("select_node.jstree", function (e, data) { 
    $('#jstree').jstree('save_state'); 
}) ; 

.on("activate_node.jstree", function(e,data){ 
    window.location.href = data.node.a_attr.href; 
}) 

Answer 6

ho risolto in questo momento questo problema con un po 'di forza bruta

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li> 

piacevole e facile

Answer 7

Prova questo:

jQuery("#mytree ul").on("click","li.jstree-node a",function(){ 
    document.location.href = this; 
}); 

Grazie a jQuery event delegation, questo evento delegherà a elemets <a>. se non si utilizza la delega dell'evento, verrà attivato solo per la prima volta che si fa clic su ogni ancora.

Answer 8

Di solito è necessario controllare l'azione sia di "Container Nodes" che di "Child Nodes" insieme.

Quindi possiamo fare thomething come:

$("#jstree-div").jstree().delegate("a","click", function(e) { 
      if ($("#jstree-div").jstree("is_leaf", this)) { 
       document.location.href = this; 
      } 
      else { 
       $("#jstree-div").jstree("toggle_node", this); 
      } 
     }); 

"is_leaf" è una delle funzioni jsTree che verifica se un nodo non ha figli.