CODEWITHSUNDEEP
javascriptjqueryjstree
Anna
Anna

Reputation: 349

jstree is blank and has an empty <ul> after instantiation

I am trying to get a basic jstree working but unfortunately every time the jstree is instantiated through element.jstree(), an empty tag is generated and there is no content whatsoever.

I have tried different environments, computers, and browsers, and all exhibit the same behavior.

Here is a jsfiddle based off of a tutorial I was using to try and solve this problem where you can see the tree not in action!

https://jsfiddle.net/jtsehjn9/3/

HTML:

<div id="filetree" style="height: 200px;">
  <li data-jstree='{"opened":true,"selected":true}'>Root
    <ul>
      <li data-jstree='{"disabled":true}'>Child</li>
      <li data-jstree='{"icon":"/static/modules/tree.png"}'>
        Child</li>
      <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
        Child</li>
    </ul>
  </li>
</div>

No CSS

Javascript:

$('#filetree').jstree();

Includes:

<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

Upvotes: 1

Views: 769

Answers (1)

Adam
Adam

Reputation: 2666

It appears that you need to have an unordered list surrounding your tree. Try changing your HTML to look like this (note the addition of <ul> after <div id="filetree">:

<div id="filetree" style="height: 200px;">
  <ul>
    <li data-jstree='{"opened":true,"selected":true}'>Root
      <ul>
        <li data-jstree='{"disabled":true}'>Child</li>
        <li>Child</li>
        <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
          Child</li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions