title: Jquery TreeView - add nodes to an async tree (PHP, Yii, MTreeView)
body: <p>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.  </p>
  
  <p>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.</p>
  
  <p>Controller:</p>
  
  <pre><code>public function actionajaxFillTree() {
      Yii::import('application.extensions.MTreeView.MTreeView');
      if (!Yii::app()-&gt;request-&gt;isAjaxRequest) {
          exit();
      }
      $parentId = $_GET['root'];
      $result = array();
      if ($parentId == 'source') {
          array_push($result, array('id' =&gt; '1', 'text' =&gt; 'text1', 'hasChildren' =&gt; 1));
          array_push($result, array('id' =&gt; '2', 'text' =&gt; 'text2', 'hasChildren' =&gt; 1));
          array_push($result, array('id' =&gt; '3', 'text' =&gt; 'text3', 'hasChildren' =&gt; 0));
      } elseif ($parentId == '1') {
          array_push($result, array('id' =&gt; '1-1', 'text' =&gt; 'text1-1', 'hasChildren' =&gt; 0));
          array_push($result, array('id' =&gt; '1-2', 'text' =&gt; 'text1-2', 'hasChildren' =&gt; 0));
      } elseif ($parentId == '2') {
          array_push($result, array('id' =&gt; '2-1', 'text' =&gt; 'text2-1', 'hasChildren' =&gt; 0));
      };
      echo str_replace(
              '"hasChildren":"0"', '"hasChildren":false', MTreeView::saveDataAsJson($result));
      exit();
   }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code> &lt;?php $this-&gt;widget('application.extensions.MTreeView.MTreeView', array('url' =&gt; array('ajaxFillTree'),
  'animated' =&gt; 'fast',
  'htmlOptions' =&gt; array('id' =&gt; 'tree'),
      )); ?&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p>(inside the view)</p>
  
  <pre><code>&lt;button id="add"&gt;Add!&lt;/button&gt; 
  &lt;script language="javascript" type="text/javascript"&gt;   
    $("#add").click(function() {
             var children = "&lt;li&gt;New Sublist&lt;ul&gt;&lt;/ul&gt;"; 
       children = $(children).insertAfter("#1-2");        
           $("#tree").treeview({
                add: children
           });               
  });    
  </code></pre>
  
  <p></p>
  
  <p>I noticed that I can add/remove <code>&lt;ul&gt;&lt;/ul&gt;</code> 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.  </p>
  
  <p>Thanks for any help.</p>