Coldfusion tree and connector

Mathijs · June 22, 2011, 9:35pm

Hi, i’m trying to create a tree which connects to the DB. First i want to change the text of an node and have that saved to the DB. The tree load correctly, the update is confirmed in the log, but the DB is not updated. What goes wrong? Please assist.

My code in the HTML:

<script> 
	tree=new dhtmlXTreeObject("treeboxbox_tree","350px","400px",0);
	tree.setSkin('dhx_skyblue');
	tree.setImagePath("/#application.settings.mapping#/dhtmlx/dhtmlxTree/codebase/imgs/csh_vista/");
    	tree.loadXML("dhtmlXtree_connector.cfm");
	tree.enableDragAndDrop(true);
	tree.enableItemEditor(true);
	var dp = new dataProcessor("dhtmlXtree_connector.cfm");
	dp.setUpdateMode("on");
	dp.init(tree);
</script>

The dhtmlXtree_connector.cfm page

<cfinclude template="dhtmlXtree_config.cfm">

<!--- connector ---> 
<cfset tree = createObject("component",request.dhtmlxConnectors["tree"]).init(request.dhtmlxConnectors["datasource"],request.dhtmlxConnectors["db_type"])>
<cfset tree.event.attach("beforeUpdate",myUpdate)>

<cfset tree.render_sql("SELECT DepartmentID,DepartmentName,DepartmentParentID from ao_department WHERE CompanyID='#session.user.companyID#'","DepartmentID","DepartmentName","","DepartmentParentID")>

<cffunction name="myUpdate">
	<cfargument name="data">
	<cfset var departmentName = ARGUMENTS.data.get_value("text")>
	<cfset var departmentID = ARGUMENTS.data.get_value("id")>
	<cfset tree.sql.query("UPDATE ao_department SET departmentName='#departmentName#' WHERE departmentID='#departmentID#'")>
	<cfset ARGUMENTS.data.success()>   
</cffunction>

<cfset tree.enable_log(variables,getCurrentTemplatePath() & "_debug.log")>

The log gives me:
DataProcessor :: row CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C marked [updated,valid]

Mathijs · June 23, 2011, 6:46am

Or is this functionality only possible in the pro version?

Stanislav · June 23, 2011, 9:56am

Change
dp.setUpdateMode(“on”);
to the
dp.setUpdateMode(“cell”);
or remove that line at all to enable auto-updating mode.

Mathijs · June 23, 2011, 6:09pm

OK, that helped. i’m a little further

But now i get:
Not an XML, probably incorrect content type specified ( must be text/xml ), or some text output was started before XML data

Ivan_CF · June 24, 2011, 9:24am

Hi
Here is one problem in your code.
You use “tree” variable in the custom function, and this variable is not global and as a result invisible inside the function. As a solution you have to worj with “request.tree” instead of “tree” everywhere in the code (tree=variables.tree). You get xml error because there is CF error and it breaks the output.

Mathijs · June 24, 2011, 10:25am

Ok, i tried this. but still it does not update de record in the table.
this is the code right now:

<cfinclude template="dhtmlXtree_config.cfm">

<!--- connector ---> 
<cfset tree = createObject("component",request.dhtmlxConnectors["tree"]).init(request.dhtmlxConnectors["datasource"],request.dhtmlxConnectors["db_type"])>
<cfset tree.event.attach("beforeUpdate",myUpdate)>

<cfset tree.render_sql("SELECT DepartmentID,DepartmentName,DepartmentParentID from ao_department WHERE CompanyID='#session.user.companyID#'","DepartmentID","DepartmentName","","DepartmentParentID")>

<cffunction name="myUpdate">
   <cfargument name="data">
   <cfset var departmentName = ARGUMENTS.data.get_value("text")>
   <cfset var departmentID = ARGUMENTS.data.get_value("id")>
   <cfset request.tree.sql.query("UPDATE ao_department SET DepartmentName='#departmentName#' WHERE DepartmentID='#departmentID#'")>
   <cfset ARGUMENTS.data.success()>   
</cffunction>

<cfset tree.enable_log(variables,getCurrentTemplatePath() & "_debug.log")>

I changed “directie” into “directiess” in the text field
In the log it looks OK:
Log:
row CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C marked [updated,valid]
Initiating data sending for CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
Sending in one-by-one mode, current ID = CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
Server url: dhtmlXtree_connector.cfm parameters

CC7A9FC0-FC3F-9683-A8BFA68A66A71B3Ctr_id = CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
tr_pid = 0
tr_order = 0
tr_text = Directiess
!nativeeditor_status = updated

Server response received details

<?xml version='1.0' encoding='utf-8' ?><item id='282AE1E8-16E6-D379-3439BC897AB8C478' text='Vakbondsconsulent' child='-1' ................

Initiating data sending for all rows

But after refreshing the page, the record is not updated.

Ivan_CF · June 24, 2011, 1:28pm

Hi.
Could you change the “tree” to “request.tree” in all the places, not only inside the function. When you create it is not accessible inside the function, because it is local variable. When you try to use request.tree - it also will throw error as this variable is undefined. But if you define and then use everywhere in the code “request.tree” you will be able to get access to it from the custom function too.

Ivan_CF · June 24, 2011, 1:33pm

…
And function “tree.enable_log” must be before you call render_table or render_sql.

Mathijs · June 24, 2011, 2:02pm

thanks for the help, but still i get a good response, but no actual saving in the DB.

This is my code for the connector:

<cfinclude template="dhtmlXtree_config.cfm">

<cffunction name="myUpdate">
	<cfargument name="data">
	<cfset var name = ARGUMENTS.data.get_value("tr_text")>
	<cfset var ID = ARGUMENTS.data.get_value("tr_id")>
	<cfset request.tree.sql.query("UPDATE ao_department SET DepartmentName='#departmentName#' WHERE DepartmentID='#departmentID#'")>
	<cfset ARGUMENTS.data.success()>   
</cffunction>

<!--- connector ---> 
<cfset request.tree = createObject("component",request.dhtmlxConnectors["tree"]).init(request.dhtmlxConnectors["datasource"],request.dhtmlxConnectors["db_type"])>
<cfset request.tree.enable_log(variables,getCurrentTemplatePath() & "_debug.log")>
<cfset request.tree.event.attach("beforeUpdate",myUpdate)>
<cfset request.tree.render_sql("SELECT DepartmentID,DepartmentName,DepartmentParentID from ao_department WHERE CompanyID='#session.user.companyID#'","DepartmentID","DepartmentName","","DepartmentParentID")>

and this is the code for the config:

<!--- just define datasources and connector paths --->
<cfset request.dhtmlxConnectors = StructNew()>
<!--- datasource to use in the samples --->
<cfset request.dhtmlxConnectors["datasource"] = "aoonline">
<!--- DB type to use in samples. Available: MySQL,MSSQL,MSAccess --->
<cfset request.dhtmlxConnectors["db_type"] = "MySQL">
<!--- here are the Full Mappings to the directoy with connectors, including the connector component without cfc extention. --->

<cfset request.dhtmlxConnectors["tree"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.TreeConnector">
<cfset request.dhtmlxConnectors["tree_group"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.TreeGroupConnector">
<cfset request.dhtmlxConnectors["treegrid"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.TreeGridConnector">
<cfset request.dhtmlxConnectors["treegrid_group"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.TreeGridGroupConnector">
<cfset request.dhtmlxConnectors["treegrid_multitable"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.TreeGridMultitableConnector">

<cfset request.dhtmlxConnectors["combo"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.ComboConnector">
<cfset request.dhtmlxConnectors["tree_multitable"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.TreeMultiTableConnector">
<cfset request.dhtmlxConnectors["options"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.OptionsConnector">
<cfset request.dhtmlxConnectors["grid"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.GridConnector">
<cfset request.dhtmlxConnectors["grid_config"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.GridConfiguration">
<cfset request.dhtmlxConnectors["scheduler"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.SchedulerConnector">
<cfset request.dhtmlxConnectors["dataview"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.DataViewConnector">
<cfset request.dhtmlxConnectors["convert"] = "ao_includes.version1_0.dhtmlx.dhtmlXConnector.codebase.ConvertService">

And this the code in de page to create the tree:

And this is what the LOG file says:
row CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C marked [updated,valid]
Initiating data sending for CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
Sending in one-by-one mode, current ID = CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
Server url: dhtmlXtree_connector.cfm parameters
CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
tr_id = CC7A9FC0-FC3F-9683-A8BFA68A66A71B3C
tr_pid = 0
tr_order = 0
tr_text = Directiesx
!nativeeditor_status = updated
Server response received details

<?xml version='1.0' encoding='utf-8' ?><item id='282C0068-16E6-D379-34E5045E5F0A0782' text='Facilitaire <p>So at you see that the parameters have the changed text “Directiesx”<br> But the server response give me text=‘Directie’</p>

Mathijs · June 24, 2011, 2:03pm

the code for the tree

<script> 
	tree=new dhtmlXTreeObject("treeboxbox_tree","350px","400px",0);
	tree.setSkin('dhx_skyblue');
	tree.setImagePath("/#application.settings.mapping#/dhtmlx/dhtmlxTree/codebase/imgs/csh_vista/");
    	tree.loadXML("dhtmlXtree_connector.cfm");
	tree.enableDragAndDrop(true);
	tree.enableItemEditor(true);
	var dp = new dataProcessor("dhtmlXtree_connector.cfm");
	dp.setUpdateMode("cell");
	dp.init(tree);
</script>

Ivan_CF · June 24, 2011, 3:56pm

Hi
Just checked your code on the practice.

At first if it is simple edit of the cell you don’t need any events. Because “update” is built feature here. Custom events are necessary when update is not simple and some other things have to be done.
According to your code:

<cfset var name = ARGUMENTS.data.get_value("tr_text")> <cfset var ID = ARGUMENTS.data.get_value("tr_id")> <cfset request.tree.sql.query("UPDATE ao_department SET DepartmentName='#departmentName#' WHERE DepartmentID='#departmentID#'")>

You use here two undefined variables: departmentName and departmentID (you have only ID and Name).
And the first two functions to get data should look like:

<cfset var name = ARGUMENTS.data.get_value("DepartmentName")> <cfset var ID = ARGUMENTS.data.get_id()>

And then query like

 <cfset request.tree.sql.query("UPDATE ao_department SET DepartmentName='#name#' WHERE DepartmentID='#id#'")>

But as I told above: this feature is included in the connectors and simple save is not necessary to be done with events. It will be done inside connectors.

Mathijs · June 24, 2011, 4:56pm

Ah, thanks.
The first one was indeed a mistake in de function code.
I changed it and tested it. No results.
I did also test with the built in functionality, but i have no luck with that either. That was the reason to have the function.

Did i include the correct JS´s files?

	<link rel="STYLESHEET" type="text/css" href="/#application.settings.mapping#/dhtmlx/dhtmlxTree/codebase/dhtmlxtree.css">
	<script language="javascript" src="/#application.settings.mapping#/dhtmlx/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
	<script language="javascript" src="/#application.settings.mapping#/dhtmlx/dhtmlxTree/codebase/dhtmlxtree.js"></script>
	<script language="javascript" src="/#application.settings.mapping#/dhtmlx/dhtmlxTree/codebase/ext/dhtmlxtree_ed.js"></script>
	<script language="javascript" src="/#application.settings.mapping#/dhtmlx/dhtmlxConnector/codebase/connector.js"></script>
	<script src="/#application.settings.mapping#/dhtmlx/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js" type="text/javascript"></script>
	<script src="/#application.settings.mapping#/dhtmlx/dhtmlxDataProcessor/codebase/dhtmlxdataprocessor_debug.js" type="text/javascript"></script>

Ivan_CF · June 27, 2011, 9:24am

Hi. There is one problem in js includings:
connector.js should be included the last. There is some code which updates dataprocessor object so when it is initialized earlier than dataprocessor.js error happends. I think ypou get problems because of this mistake. Unfortunately, it is not described anywhere, so it was impossible to predict this.

Mathijs · June 27, 2011, 10:23am

WOW great! Thanks for this. Now i’m getting further… It saves.
Thanks a lot!