Hi,
Firstly let me start by saying congratulations on an awesomely wholistic and standalone toolset 
. I have a home project which for one aspect will need quite a dynamic and responsive UI and DHTMLx is just the thing. I was very happy to have found something so well written, low on dependencies and quite well documented. Thanks for releasing the GPL version as well - without it, I wouldnât be using DHTMLx and so would not be able to recommend it, which I may well do at work now (for commercial licence).
Unfortunately, however Iâve come across a problem Iâve not been able to resolve on my own. Iâve consulted all the documentation, forums and site search to no avail.
Iâm using the GPL version 4.0.
My objective is simply to use a toolbar control to add items of different types to a tree and have that synchronized back to the PHP/MySQL server with a fair bit of UserData (from a form I plan to add later).
When testing some early code, I realized that if I create a new node A and then create a new node B under A, B is lost. That is, when I refresh the HTML page, node B is not in the tree anymore. When I look at the MySQL table data, the specification_parent_id attribute is 0. From debugging in Chrome, I can see that tree.getSelectedItemId() unexpectedly returns 0 when this code is executed during the creation of node B.
Am I doing something wrong 
or have I found a bug 
?
Any help much appreciated. Code samples follow.
Page Code (Tester.html)
<!DOCTYPE HTML>
<html>
<head>
<title>DHTMLx Tree Tester</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="dhtmlx/codebase/dhtmlx.css"/>
<style>
/* it's important to set width/height to 100% for full-screen init */
html, body {
width: 100%; /*provides the correct work of a full-screen layout*/
height: 100%; /*provides the correct work of a full-screen layout*/
overflow: hidden; /*hides the default body's space*/
margin: 0px; /*hides the body's scrolls*/
}
</style>
<script src="dhtmlx/codebase/dhtmlx.js"></script>
<script>
window.ExtractorTreeRootId=12345; // This line is done by PHP usually
function doOnLoad() {
dhtmlx.image_path='dhtmlx/codebase/imgs/';
///////////////////////////////////////////////////////////////////////
// Setup Layout
var main_layout = new dhtmlXLayoutObject(document.body, '1C');
var a = main_layout.cells('a');
a.setText('Tree Problem Demonstration');
///////////////////////////////////////////////////////////////////////
// Setup Tree
var tree = a.attachTree(window.ExtractorTreeRootId);
tree.setImagePath('dhtmlx/codebase/imgs/dhxtree_'+window.skin+'/');
tree.loadXML('ExtractorDesignerTreeData.php?id='+window.ExtractorTreeRootId, function(){
tree.openItem(window.ExtractorTreeRootId);
tree.selectItem(window.ExtractorTreeRootId);
tree.setItemCloseable(window.ExtractorTreeRootId,false);
});
tree_dp = new dataProcessor('ExtractorDesignerTreeData.php');
tree_dp.init(tree);
tree.attachEvent("onSelect", function(id){
status.setText('You selected Tree item id:'+id);
});
///////////////////////////////////////////////////////////////////////
// Setup Toolbar
var toolbar = a.attachToolbar();
toolbar.setIconsPath('dhtmlx/codebase/imgs/');
toolbar.loadStruct('TesterToolbar.xml', function(){});
toolbar.attachEvent("onClick", function(id){
var currentNodeId = tree.getSelectedItemId();
var newNodeId = (new Date()).getTime();
tree_dp.setUpdateMode("off");
switch (id) {
case "new_url":
tree.insertNewChild(currentNodeId,newNodeId,"New URL",0,"world_link.png","world_link.png","world_link.png","SELECT");
tree.setUserData(newNodeId,'img0',"world_link.png");
tree.setUserData(newNodeId,'specification_id',newNodeId);
//Nodes turn red when I do this, so I figure that's not a good idea, as its handled by the DataProcessor?
//--> tree.setUserData(newNodeId,'specification_parent_id',currentNodeId);
break;
case "button_delete":
if (currentNodeId != 0) {
tree.deleteChildItems(currentNodeId);
tree.deleteItem(currentNodeId, true);
}
break;
}
tree_dp.sendData();
tree_dp.setUpdateMode("cell"); /*enable auto update for dataprocessor again*/
status.setText('You clicked toolbar button:'+id);
});
///////////////////////////////////////////////////////////////////////
// Setup Status Bar
var status = a.attachStatusBar();
status.setText('Loaded.');
}
</script>
</head>
<body onload="doOnLoad()"></body>
</html>Toolbar code (TesterToolbar.xml)
<toolbar>
<item id="new" type="buttonSelect" img="blue-document--arrow.png" text="New Extractor" title="New Extractor Entity">
<item type="button" id="new_url" text="URL" img="world_link.png" />
</item>
<item type="button" id="button_delete" text="Delete" img="cross.png" />
</toolbar>
ExtractorDesignerTreeData.php:
[code]<?php
require(ââŠ/dbDetails.phpâ);
require(âdhtmlxConnector/codebase/tree_connector.phpâ);
require(âdhtmlxConnector/codebase/db_pdo.phpâ);
$db=new PDO(âmysql:host=$DBHost;dbname=$DBNameâ, $DBUser, $DBPassword);
$treeConn = new TreeConnector($db,âPDOâ);
$treeConn->render_table(âextractor_specificationâ,âspecification_idâ,âspecification_name,specification_id,specification_InputUrlPattern,specification_ContentSelectorType,specification_ContentSelector,specification_OutputDestination,img0â,ââ,âspecification_parent_idâ);
?>[/code]
MySQL Table Structure:
Table Data:
Before Refresh:
After Refresh:
