Hi Everyone!
I am trying to get sub nodes (in my case sub categories) on clicking in the parent nodes (categories). But I can see no ajax request is happening in my case. I have
used the solution from this website - (http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/). Here is my jstree code below -
/**
* menu tree generation
*/
$("#menu_tree")
.bind("open_node.jstree", function (e, data) { // this binding will collapse all nodes whenever user expands any single node
data.rslt.obj.siblings().filter(".jstree-open").each(function () {
data.inst.close_node(this);
});
})
.jstree({
"json_data": {
"ajax": {
"url": base_url + "draw/get_child"
}
},
"types": { // this will let user to expand or collapse node by clicking on the node title
"types": {
"default": {
"select_node": function (e) {
this.toggle_node(e);
return false;
}
}
}
},
"core": {
"html_titles": true,
"load_open": true
},
"plugins": ["themes", "json_data", "html_data", "types", "ui"],
"themes": {
"theme": "apple",
"dots": true,
"icons": true
}
});
the html part is below -
<div class="" id="menu_tree" style="width: 500px;z-index: 1; float: right;position: relative;">
<ul class="" style="position: absolute;top: 0px;left: 0px;">
<?php
if (!empty($parent_categories)) {
foreach ($parent_categories as $parent_categories) {
?>
<li id="cat<?php echo $parent_categories->objcat_id; ?>">
<a href="#" class=""><?php echo $parent_categories->category_name; ?></a>
</li>
<?php
}
}
?>
</ul>
</div>
I am only loading parent nodes for the first time, all child nodes should load by user click on the parent nodes.
if i use "html_data" rather than "json_data" then a request occurs and i can see a loading gif but then i get this error "Uncaught Error: NotFoundError: DOM Exception
8", but if i use "json_data" then nothing just happens, no ajax request in the firebug.
i can't understand what's wrong i am doing... Any solution please?
Thank you in advance!
AVADHESH PATEL
15-Apr-2013