jstree as a module (ESM) example
Closed this issue · 2 comments
tacman commented
I see that jstree is on jsdelivr and has an ESM section:
https://www.jsdelivr.com/package/npm/jstree
I'm excited about using importmaps and modules, and was hoping to get this working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic HTML Demo</title>
<link href="https://cdn.jsdelivr.net/npm/jstree@3.3.16/dist/themes/default/style.min.css" rel="stylesheet">
<script type="module">
import $ from 'https://cdn.jsdelivr.net/npm/jquery@3.7.1/+esm'
import jstree from 'https://cdn.jsdelivr.net/npm/jstree@3.3.16/+esm'
$('#html1').jstree();
</script>
</head>
<body>
<h1>#html1</h1>
<ul id="html1">
<li>Root node 1</li>
<li>Root node 2</li>
<li>Root node 3</li>
</ul>
</body>
</html>
The jstree() call is made, but it ends up removing the nodes. Is it possible to get jstree to work this way? Thanks.
vakata commented
I believe this has nothing to do with ESM loading - try wrapping the UL in a DIV, and create the jstree instance on the DIV, not the UL.
tacman commented
yep, perfect, thanks! Working example at https://jsfiddle.net/tacman1123/3e8j7qkc/5/