[Note: not really a cakephp issue ]
I am using jstree to represent my data like a directory listing. So far, jstree gave me the functionality i needed, till one of my teammate pointed to me that clicking a node in the tree does not fire up the onclick event i assigned to that node.
The json_data each node is as follows:
{"data":{"title":"1st Commentary","attr":{"id":"article-85","class":"articles","onclick":"summary(event)"}}
and the html output of the node is like this:
<div id="articles"> <ul> <li> <ins> </ins> <a href="#" onclick="summary(event)" id=article-85"> <ins> </ins>1st Commentary</a> </li> </ul> </div>
I have a function defined as:
function summary(event) {...}
and its not firing in Google Chrome, though it works perfectly okay with Mozilla Firefox.
The odd thing is that if i copy the whole ‘html output’ in a separate page, the onclick event works fine in Chrome. So i figured it might be a jstree issue. There must be a right way of delegating this event to a handler rather than specifying it to the list of attributes of each node. And after googling i found out that, yes there is. Thanks to a lot of people who continuously responds to questions in stackoverflow. Here is the thread [http://stackoverflow.com/questions/4611317/how-can-i-make-jstree-render-nodes-as-links]
so the solution to my problem is this:
$('#articles')
.jstree(...)
.delegate('a', 'click', summary);
Hi There, I have searched far and wide on google and this is about the only blog of someone that has gotten CakePHP to work with jstree. I’m starting to use jstree today and am having somewhat of a hard time so far. If it wouldn’t be too much trouble, would you mind please posting your model, controller, view, layout and any other pertinent files? Or if it would be easier to email these then that’s fine too!! I know it’s a lot to ask but would help me out tremendously!!
Basically I just need an example of jstree reading data from the database and then building the tree. From there I can probably figure out how to edit nodes, etc. Thank you so much!!!!
Best Regards,
David Henley
Comment by David — July 6, 2011 @ 8:31 pm
Hi David,
I am glad somehow that my post did help you (or probably pointed you to the right direction)
i am assuming you are using jstree as follows
(let #dashboard be the element holder of your tree)
$('#dashboard').jstree({ "json_data":{ [to be discussed in more detail below] }, "plugins":["json_data", (other plugins here...)] });—
if you follow jstree documentation or example, u have to include json_data in the plugin listing in ur jstree definition. and json_data needs atleast these two attributes:
url and data.
now you need a url that returns a json encoded string of your data that should follow this format:
{ data : { title: "Title of Node", attr: // (if you have any
)
{id: "node1", class: "mynodes"}
},
icon: "class name of icon you will use",
state: "closed" //just see the jstree docu for more info
this is the basic structure of the json object you need to output
First make sure that if you have this kind of json string (create a static url first) and see if your jstree loads properly
then you can make a controller return a json like this by building an array:
$data = $this->MyModel->find('all'); $return = array(); foreach($data as $d) { $return[] = array( "data" = array( "title" = >$d["MyModel"]["title"]; //if mymodel has title column "attr" => array( "id" => 'node-'.$d["MyModel"]["id"], ... // if you need more attributes here ) ), "state" => "closed", "icon" => //not necessarily required ;P ); ); } return json_encode($return);just make sure that you disable autoRender by stating. $this->autoRender = false;
—
now things gets complicated if you have child nodes
for this u need your url to be dynamic
if this is the case just follow up on this thread. I hope i was able to help
Comment by ldazo — August 2, 2011 @ 12:45 pm