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