Ganbin Ganbin - 2 months ago 13
Javascript Question

How can I redraw my jstree with new HTML data?

I have a list of category depending of the publication selected. I want to redraw my category tree depending of the publication selected.

I retrieve new html from the server everytime I select a new publication.

My HTML look like that :

<ul>
<li id="27">
Moto
<ul>
<li id="30">Route</li>
</ul>
<ul>
<li id="31">Cross</li>
</ul>
</li>
</ul>
<ul>
<li id="28">
Limousine
<ul>
<li id="32">3 Portes</li>
</ul>
<ul>
<li id="33">5 Portes</li>
</ul>
</li>
</ul>
<ul>
<li id="36">Avis Mortuaire</li>
</ul>
<ul>
<li id="49">
Stellen
<ul>
<li id="71">Stellengesuche</li>
</ul>
<ul>
<li id="72">Stellen</li>
</ul>
<ul>
<li id="73">Stellenangebote</li>
</ul>
</li>
</ul>
<ul>
<li id="48">
Diverses
<ul>
<li id="62">Diverses</li>
</ul>
<ul>
<li id="68">Lebenshilfe</li>
</ul>
<ul>
<li id="69">Bekanntschaften</li>
</ul>
<ul>
<li id="70">Direktverkauf/Fabrik-L├Ąden</li>
</ul>
</li>
</ul>
<ul>
<li id="105">Editorial-Anzeige</li>
</ul>


So then I try to do a
jq11.jstree.reference('categoryTree').redraw(true)
but I get an error
Uncaught TypeError: Cannot read property 'className' of undefined
.

So I wonder how can I redraw my jstree with the new html I insert when I change my publication?

Thanks

Answer

Ok finally I have found a way to do this by destroying the old DOM and instance $.jstree.destroy ().

So I just do this way $.jstree.reference('categoryTree').destroy(); then rebuild my DOM $('#categoryTree').html(...); and then I recreate my jstree instance $('#categoryTree').jstree({...})

I hope this will help someone else.

Comments