How to insert a jsTree into a dynamically generated container?

mark.t.m...@googlemail.com

unread,

Feb 7, 2011, 2:31:58 PM2/7/11

to jsTree

When I create a <div> with id="treeview", my simple example below
works. But if I *dynamically* create the container <div> (e.g. using
jQuery append() after the user has pressed a button), the treeview
will not appear. Is there way to resolve this?

$(function () {
$("#treeview").jstree({
"json_data" : {
"ajax" : {
"url" : "test.json",

}
},
"plugins" : [ "themes", "json_data" ]
});
$("#treeview").jstree("set_theme","apple");
$("#treeview").jstree("toggle_icons");

$(".jstree a").live("click", function() {
alert("Testing");
})
});

Ivan Bozhanov

unread,

Feb 8, 2011, 5:36:12 AM2/8/11

to jst...@googlegroups.com

Well, just make sure you create the tree AFTER the div is created and will work as exepcted. Doesn't it? If it doesn't can you provide an example of how you are doing this.

Kindest regards,
Ivan

mark.t.m...@googlemail.com

unread,

Feb 8, 2011, 10:15:52 AM2/8/11

to jsTree

Many thanks. Below is my working example for anyone else trying this.

<html>

<head>
<script src="jquery.min.js"></script>
<script src="jquery.jstree.js"></script>

<script>

$(document).ready(function() {

$("#container").html('<div class="treeview"></div>');
$(".treeview").jstree({
"html_data" : {
"data" : "<li id='root'><a href=''>Root node</a><ul><li><a
href=''>Child node</a></li></ul></li>"
},
"plugins" : [ "themes", "html_data" ]
});

})
</script>
</head>

<body>
<div class="treeview"></div>
<div id="container"></div>
</body>

</html>

Chrazy

unread,

Feb 9, 2011, 9:44:24 AM2/9/11

to jsTree

An even nicer way would be to do something like this:

var $tree = $('<div class="treeview"></
div>').appendTo('#container').jstree({...

On 8 Feb, 16:15, "mark.t.macdon...@googlemail.com"

Reply all

Reply to author

Forward