title: JSTree - on auto-refresh turns to plain ul li
body: <p>I am generating JSTree from a MySQL table using PHP.  I have three files.</p>
  
  <p><strong>index.php</strong> - page where I have the div to load the JStree.</p>
  
  <p><strong>autorefreshtree.php</strong> - page that connects to mysql, fetch the data and echo the ul and li's.</p>
  
  <p><strong>jtree.js</strong> - this page holds the jquery function to convert the ul and li's to a tree with checkbox.</p>
  
  <p><strong>Index.php</strong></p>
  
  <pre><code>&lt;div class="rhsbar2"&gt; &lt;!-- JSTree begins --&gt;       
     &lt;div class="tab-content"&gt;
      &lt;div role="tabpanel" class="tab-pane active" id="annotateDirectories"&gt;
  
      &lt;/div&gt; 
     &lt;/div&gt;
  &lt;/div&gt; &lt;!-- JSTree ends --&gt;
  
  &lt;script&gt;
  function autoload() {
    xmlhttp =new XMLHttpRequest();
    xmlhttp.open("GET", "autorefreshtree.php", false);
    xmlhttp.send(null);
    document.getElementById('annotateDirectories').innerHTML=xmlhttp.responseText;
  }
  
  autoload();
  
  //load every two seconds
  setInterval(function(){
    autoload();
  },2000);
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>autorefreshtree.php</strong></p>
  
  <pre><code>&lt;?php
      require 'connect.php';
      if ($connect-&gt;connect_error) {
        die("Connection failed: " . $connect-&gt;connect_error);
      }
      category_tree(0);
      function category_tree($catid){
          global $connect;
          $sql = "select * from `tree` where `parentid` ='$catid'";
          $result = $connect-&gt;query($sql);
          while($row = mysqli_fetch_object($result)):
              $i = 0;
              if ($i == 0) echo '&lt;ul&gt;';
                  echo '&lt;li&gt;' . $row-&gt;node_name;
                  category_tree($row-&gt;tree_id);
                  echo '&lt;/li&gt;';
              $i++;
              if ($i &gt; 0) echo '&lt;/ul&gt;';
          endwhile;
          }
      mysqli_close($connect);
  ?&gt;
  </code></pre>
  
  <p><strong>jtree.js</strong></p>
  
  <pre><code>$(document).ready(function(){
      $("#annotateDirectories").jstree({
          "checkbox": {   
          'tie_selection' : false,        
          'two_state' : true 
      },
      'plugins': ['wholerow','search','checkbox', 'sort']
      });
  });
  </code></pre>
  
  <p>The problem that I am facing is, when the page loads, the tree gets rendered properly.  However when the reload happens after two seconds, instead of tree I get only the ul and li displayed.</p>
  
  <p><a href="https://i.stack.imgur.com/HmgTU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HmgTU.png" alt="Before autoload"></a> <a href="https://i.stack.imgur.com/ir46M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ir46M.png" alt="after autoload"></a></p>