How to refresh tree view at the same page

Hi all,

How to refresh a (CTreeView) within a page, with Ajax.

I have a tree view at the left of my page. Display item categories, which retrieves from database. At the same page,I have another area to create new item category. I want to update my tree view right after creating a new item category.

I have the following js function get invoked, after creating a item category:




function updateCategoryTree()

{

	<?php echo CHtml::ajax(array(

            'url'=>array('treeFill'),

            'type'=>'get',

	    'dataType'=>'json',

	    'success'=>"function(data) // need this callback <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' />

            {

                // How to update "category_tree" ??

            	//$('#category_tree')

            } ",

            ))?>;

    return false; 

}



the corresponding action:




public function actionTreeFill()

	{

		if (!Yii::app()->request->isAjaxRequest) {

            exit();

        }

        

        $treeData = array();

        

		if (isset($_GET['root']) && $_GET['root'] == 'source') {

            $treeData[0] = array('text'=>'root','id'=>0,'hasChildren'=>true);

        }

        else {       	

			

	        foreach(ShopCategory::model()->findAll() as $elem)

	        {

	        	$options = array('href'=>'#', 'id'=>$elem['id']);

	        	$nodeText = CHtml::openTag('a', $options);

				$nodeText.= $elem['title'];

				$nodeText.= CHtml::closeTag('a')."\n";

	        	

				$treeData[$elem['id']] = array('text'=>$nodeText,'id'=>$elem['id'],'hasChildren'=>false);

	        }

        }

        

        echo CTreeView::saveDataAsJson($treeData);

	}



I see the JSON data have been returned correctly, but how to update the tree view with them ??

Thank for your reading.

Hi Vincent,

Reading the documentation of the options for this plugin at http://docs.jquery.com/Plugins/Treeview/treeview#options there is an option to add an item to the treeview, as such:


var tree = $(".selector").treeview();

$(".button").click(function() {

  var newSublist =  $("<li><span class='folder'>New Sublist</span><ul>" + 

     "<li><span class='file'>Item1</span></li>" + 

     "<li><span class='file'>Item2</span></li></ul></li>").appendTo(tree);

  tree.treeview({

    add: newSublist

  });

});

For your implementation, instead of defining newSubList manually, use the jQuery $.get() function to retrieve the data from your actionTreeFill method, and pass that to the add: option of the treeview.

Hi georgebuckingham,

Thanks for your quick help. I’ll check and try your suggestion.

Very appreciate. -).

Regards,

Vincent.