I'm building a PHP app using Yii and am using MTreeView (widget based on JQuery TreeView) via Ajax to display some hierarchical data. I have got lazy loading working well - when user clicks a plus sign the children are loaded via Ajax. The problem: the user can create items and I want those to be added to the tree without having to reload the page. I have found several examples of how to add items to a JQuery tree, but none of these seem to work for an async tree. Because some of the items added may have children, in those cases I want a plus sign to appear that, when clicked, triggers an Ajax request to load the children, like the other plus signs in the tree.
In this minimal example I have hard-coded the data to be displayed, but in the working app the data is coming from the database using ActiveRecord Models.
Controller:
public function actionajaxFillTree() {
Yii::import('application.extensions.MTreeView.MTreeView');
if (!Yii::app()->request->isAjaxRequest) {
exit();
}
$parentId = $_GET['root'];
$result = array();
if ($parentId == 'source') {
array_push($result, array('id' => '1', 'text' => 'text1', 'hasChildren' => 1));
array_push($result, array('id' => '2', 'text' => 'text2', 'hasChildren' => 1));
array_push($result, array('id' => '3', 'text' => 'text3', 'hasChildren' => 0));
} elseif ($parentId == '1') {
array_push($result, array('id' => '1-1', 'text' => 'text1-1', 'hasChildren' => 0));
array_push($result, array('id' => '1-2', 'text' => 'text1-2', 'hasChildren' => 0));
} elseif ($parentId == '2') {
array_push($result, array('id' => '2-1', 'text' => 'text2-1', 'hasChildren' => 0));
};
echo str_replace(
'"hasChildren":"0"', '"hasChildren":false', MTreeView::saveDataAsJson($result));
exit();
}
View:
<?php $this->widget('application.extensions.MTreeView.MTreeView', array('url' => array('ajaxFillTree'),
'animated' => 'fast',
'htmlOptions' => array('id' => 'tree'),
)); ?>
So far so good. Now suppose the user adds something to the database. I want this item to appear in the tree in the appropriate place. According to other examples on the web I can add items to the tree via javascript, like this:
(inside the view)
<button id="add">Add!</button>
<script language="javascript" type="text/javascript">
$("#add").click(function() {
var children = "<li>New Sublist<ul></ul>";
children = $(children).insertAfter("#1-2");
$("#tree").treeview({
add: children
});
});
I noticed that I can add/remove <ul></ul>
to make a plus sign appear/disappear, but that's a bit of a hack. I also noticed that clicking on this plus sign does not trigger ajax requests like the other tree items that have children nodes. I suppose it might be possible to add an onClick AJAX request to this somehow -- but there must be logic somewhere that creates the plus sign and tags it with the AJAX request, and I should be invoking whatever function does that instead of effectively reverse-engineering it with JavaScript. I can't make sense of the JQuery javascript code though -- over my head.
Thanks for any help.