1

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??

taki Martillo
  • 396
  • 3
  • 8
  • 23

2 Answers2

3

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>
Brant Olsen
  • 5,628
  • 5
  • 36
  • 53
0

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!

excyberlabber
  • 629
  • 1
  • 10
  • 17