None of the jstree plugins are functioning

Question

This is a somewhat frustrating problem, one for which I cannot seem to find any documentation for. I'm relatively new to jQuery (although my grasp on it is developing), and I am completely new to this jsTree plugin.

The problem is simply that I cannot get ANY of the plugins to work. I was attracted to this because of the drag and drop, context menu, and checkbox functionality, but they just aren't happening. I am not getting any errors, I'm just getting no check boxes and the default Chrome context menu. and I can't drag and drop anything.

The jsTree populates using AJAX:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jstree test</title>
<link rel="stylesheet" href="Styles/style.min.css" />
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jstree.min.js"></script>
<script>
    $(document).ready(function () {
        $('#jsTreeTest').jstree({
            'core': {
                'check_callback' : true,
                'data': {
                    'url': 'Temp/ajax.html',
                    'data': function (node) {
                        return { 'id': node.id };
                    }
                }
            },
            'plugins' : [ "checkbox", "dnd", "contextmenu"]
        });
    });
</script>

and the mark up looks like so:

<body>
  <form id="form1" runat="server">
  <div>
      <div id="jsTreeTest">

      </div>
  </div>
  </form>
</body>

The html file ajax.html contains the following:

<ul>
<li>Test
    <ul>
        <li>SubDir1
            <ul>
                <li><a href='#'>File1.txt</a></li>
            </ul>
        </li>
        <li>SubDir2
            <ul>
                <li>SubSubDir1
                    <ul>
                        <li><a href='#'>File1.txt</a></li>
                        <li><a href='#'>File2.txt</a></li>
                    </ul>
                <li><a href='#'>File2.txt</a></li>
                <li><a href='#'>File3.txt</a></li>
            </ul></li>
        <li><a href='#'>File4.txt</a></li>
        <li><a href='#'>File5.txt</a></li>
    </ul>
</li>
</ul>

As an aside, it's also showing everything with a folder icon next to it, which is another thing I don't understand. Am I missing a reference??

Can you show how and in what order you are including the external `.js` files and `.css` files? — Brant Olsen, Jul 14 '15 at 15:24
sure...I didn't realize the order you included the files was actually important. — taki Martillo, Jul 14 '15 at 15:24
oh snap. The css file wasn't. HEH! What a goofy problem. Thanks, Brant!! You should post the answer so I can upvote it. — taki Martillo, Jul 14 '15 at 15:27
actually this still doesn't explain why everything appears as a folder. That's still pretty weird. — taki Martillo, Jul 14 '15 at 15:30
Added a snippet with working jstree. Folders are the default. — Brant Olsen, Jul 14 '15 at 15:32
You may want to look at http://stackoverflow.com/questions/7162272/how-to-change-icon-in-jstree to see how to change the folder icon. — Brant Olsen, Jul 14 '15 at 15:35

score 3 · Accepted Answer · answered Jul 14 '15 at 15:30

Make sure you include the css file as that will vastly change the way things look for the jsTree plugin.

  $(document).ready(function () {
        $('#jsTreeTest').jstree({
            'core': {
                'check_callback' : true,
              
            },
            'plugins' : [ "checkbox", "dnd", "contextmenu"]
        });
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default-dark/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/jstree.min.js"></script>
<body>
  <form id="form1" runat="server">
  <div>
      <div id="jsTreeTest">
<ul>
<li>Test
    <ul>
        <li>SubDir1
            <ul>
                <li><a href='#'>File1.txt</a></li>
            </ul>
        </li>
        <li>SubDir2
            <ul>
                <li>SubSubDir1
                    <ul>
                        <li><a href='#'>File1.txt</a></li>
                        <li><a href='#'>File2.txt</a></li>
                    </ul>
                <li><a href='#'>File2.txt</a></li>
                <li><a href='#'>File3.txt</a></li>
            </ul></li>
        <li><a href='#'>File4.txt</a></li>
        <li><a href='#'>File5.txt</a></li>
    </ul>
</li>
</ul>
      </div>
  </div>
  </form>
</body>

score 0 · Answer 2 · answered Apr 23 '17 at 16:10

I could not get the checkboxes or the contextmenu to show up in my jsp file until I loaded the specific js files for the plugins:

<link href="/js/jstree/themes/default/style.css" rel="stylesheet" type="text/css" />
<script src="/js/jstree/jstree.js"></script>
<script src="/js/jstree/jstree.checkbox.js"></script>
<script src="/js/jstree/jstree.contextmenu.js"></script>

Thanks for the tip that made me try this - I have not seen it in all the other posts I have seen! Duh!

None of the jstree plugins are functioning

2 Answers2