JsTree set_id behavior
Trying to isolate odd behavior with set_id
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<div>
<b>Background:</b> This test simulates a portion of behavior intended for the creation of a new node followed by the creation of a row in a database with an integer identity column (automatically assigned at the datasource). The item is created with
a placeholder id of -1, then after the correct id is returned from the database it is to be updated on the tree's node.
</div>
<div id="tree" class="jstree jstree-default"></div>
<div>Before creating nodes all is well, click button below to run test</div>
<button id="TestButton">Create Five New Nodes</button>
<div id="aftertest" style="display:none">
<ul>
<li><b>Result:</b>Five nodes added, hovering over category 4, 3, 2 or 1 highlights/selected category 1, Hovering over category 5 selects category 5 as expected.
<br/>
<b>Also:</b> Examing the html via DOM explorer shows that while the ID of these four LIs has been updated to 11, 12, 13 and 14, their corresponding A tags have the same ID="-1_anchor" (the temporary ID provided in create_node was -1, a number but
not one that would occur in a table with a positive integer identity)</li>
<li><b>Expected:</b>Element under the mouse is highlighted/selected. LI's with an ID of XX have associated A's with XX_anchor.</li>
</ul>
</div>
CSS
body {
font: 10pt verdana
}
JavaScript
$('#tree').jstree({
"core": {
check_callback: true,
data: [{
"id": "1",
"parent": "#",
"text": "Category One"
}, {
"id": "2",
"parent": "#",
"text": "Category Two"
}, {
"id": "3",
"parent": "1",
"text": "Child A"
}, {
"id": "4",
"parent": "1",
"text": "Child B"
}, {
"id": "5",
"parent": "2",
"text": "Child C"
}, {
"id": "6",
"parent": "2",
"text": "Child D"
}]
}
});
$('#TestButton').click(test);
function test() {
var inst = $('#tree').jstree(true),
root = inst.get_node('#');
//Create several nodes in a row
for (var i = 0; i < 5; i++) {
//create a node with a temporary id of -1
inst.create_node(
root, {
id: '-1',
text: 'New Category ' + (i + 1).toString()
},
"last",
function(node) {
//pretend we went to a database to get a unique ID
var dbId = 11 + i;
//now change the new node's id to that value
//$('#tree').jstree(true).set_id(inst.get_node("-1"), dbId);
$('#tree').jstree(true).set_id(node, dbId);
});
};
$('#TestButton').prop("disabled", true);
$('#aftertest').show();
};