Hi,
I am not sure where the best place would be to post the description of issues I experience since it involves dhtmlxgrid, dhtmlxform and probably both connector and dhtmlxprocessor.
I have followed the “Start Building Web Applications Today” tutorial and tried to modified it to what my application is supposed to do.
I have a database with a table named ‘employees’ and two other tables assosiated with it, ‘departments’ and ‘positions’. So I use 2E layout with a grid attached to the “a” cell and a form to edit the selected data attached to “b” cell of the layout. So far so good.
There are generally 2 major problems I experience with the code below:
- Selecting grid row does not put data into the form
- Clicking ‘Save changes’ button on the form does not modify data in the database
I am using DHTMLXSuite 3.0 Standard.
Here’s the code for the app.
index.html
[code]
DHTMLX Tutorial. Contacts<!-- dhtmlx.css contains styles definitions for all included components -->
<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/connector/connector.js"></script>
<script type="text/javascript" src="lib_eva.js"></script>
<style>
/*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/
html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
background-color:white;
}
</style>
lib_eva.js
[code]//define variables and starting point for application
var employeeId;
dhtmlx.image_path = “…/codebase/imgs/”;
dhtmlxEvent(window,“load”,function(){
//set layout
var layout = new dhtmlXLayoutObject(document.body,“2E”);
layout.cells(“a”).setText(“Contacts”);
layout.cells(“b”).setText(“Contact Details”);
layout.cells(“a”).setHeight(400);
//attach grid
var listGrid = layout.cells("a").attachGrid();
listGrid.setHeader("IDX,First Name,Middle Name,Last Name,Position,Department,Start Date,Phone,Ext,Mobile,Email");
listGrid.setInitWidths("100,100,100,120,120,150,90,100,50,110,*");
listGrid.setColAlign("left,left,left,left,left,left,left,left,left,left,left");
listGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
listGrid.setColSorting("str,str,str,str,str,str,str,str,str,str,str");
listGrid.init();
//load grid with data
listGrid.load("../engine/employee_list.php");
//add filter capabilities to the grid
listGrid.attachHeader("#text_filter,#text_filter,#text_filter,#text_filter,#select_filter,#select_filter,#select_filter,#text_filter,#text_filter,#text_filter,#text_filter");
//attach form
employeeForm = layout.cells("b").attachForm();
employeeForm.loadStruct("../engine/detailEmployeeForm.php");
//link grid to the form
listGrid.attachEvent("onRowSelect", function(rID,cInd){
var id = listGrid.cells(rID,0).getValue();
employeeId = id;
employeeForm.load("../engine/employee_form.php?id="+id); // does not work, thus setItemValue below
employeeForm.setItemValue("first_name",listGrid.cells(rID, 1).getValue());
employeeForm.setItemValue("middle_name",listGrid.cells(rID, 2).getValue());
employeeForm.setItemValue("last_name",listGrid.cells(rID, 3).getValue());
employeeForm.setItemValue("position",listGrid.cells(rID, 4).getValue());
employeeForm.setItemValue("department",listGrid.cells(rID, 5).getValue());
employeeForm.setItemValue("start_date",listGrid.cells(rID, 6).getValue());
employeeForm.setItemValue("desk_phone",listGrid.cells(rID, 7).getValue());
employeeForm.setItemValue("extension",listGrid.cells(rID, 8).getValue());
employeeForm.setItemValue("mobile",listGrid.cells(rID, 9).getValue());
employeeForm.setItemValue("email",listGrid.cells(rID, 10).getValue());
});
//save form data
var dpf = new dataProcessor("../engine/employee_form.php");
dpf.init(employeeForm);
var dpg = new dataProcessor("../engine/employee_list.php");
dpg.init(listGrid);
employeeForm.attachEvent("onButtonClick", function(name, command){
dpf.sendData(); // nothing happens in db or listGrid
employeeForm.save(); // nothing happens in db
});
dpf.attachEvent("onAfterUpdate",function(sid,action,tid,xml_node){
listGrid.cells(sid,1).setValue(employeeForm.getItemValue("first_name"));
listGrid.cells(sid,2).setValue(employeeForm.getItemValue("middle_name"));
listGrid.cells(sid,3).setValue(employeeForm.getItemValue("last_name"));
listGrid.cells(sid,4).setValue(employeeForm.getItemValue("position"));
listGrid.cells(sid,5).setValue(employeeForm.getItemValue("department"));
listGrid.cells(sid,6).setValue(employeeForm.getItemValue("start_date"));
listGrid.cells(sid,7).setValue(employeeForm.getItemValue("desk_phone"));
listGrid.cells(sid,8).setValue(employeeForm.getItemValue("extension"));
listGrid.cells(sid,9).setValue(employeeForm.getItemValue("mobile"));
listGrid.cells(sid,10).setValue(employeeForm.getItemValue("email"));
dpf.setUpdated(sid,true);
});
})[/code]
employee_list.php
[code]<?php
require("…/codebase/connector/grid_connector.php");
$res=mysql_connect(“localhost”,“s19181cy_evaroot”,“rooteva”);
mysql_select_db(“s19181cy_eva”);
$grid = new GridConnector($res,"MySQL");
$grid->set_encoding("iso-8859-2");
if ($grid->is_select_mode()) //code for loading data
$grid->render_sql("select * from employees, departments, positions where employee_department_id=department_idx and employee_position_id=position_idx","EMPLOYEE_IDX","EMPLOYEE_IDX,EMPLOYEE_FIRST_NAME,EMPLOYEE_MIDDLE_NAME,EMPLOYEE_LAST_NAME,POSITION_NAME,DEPARTMENT_NAME,EMPLOYEE_START_DATE,EMPLOYEE_DESK_PHONE,EMPLOYEE_EXTENSION,EMPLOYEE_MOBILE,EMPLOYEE_EMAIL");
else //code for other operations - i.e. update/insert/delete
$grid->render_table("employees","EMPLOYEE_IDX","EMPLOYEE_FIRST_NAME,EMPLOYEE_MIDDLE_NAME,EMPLOYEE_LAST_NAME,EMPLOYEE_POSITION_ID,EMPLOYEE_DEPARTMENT_ID,EMPLOYEE_START_DATE,EMPLOYEE_DESK_PHONE,EMPLOYEE_EXTENSION,EMPLOYEE_MOBILE_EMPLOYEE_EMAIL");
?>[/code]
employee_form.php
[code]<?php
require("…/codebase/connector/form_connector.php");
$res=mysql_connect(“localhost”,“s19181cy_evaroot”,“rooteva”);
mysql_select_db(“s19181cy_eva”);
$form = new FormConnector($res,"MySQL");
$form->set_encoding("iso-8859-2");
if ($form->is_select_mode()) //code for loading data
$form->render_sql("select * from employees, departments, positions where EMPLOYEE_DEPARTMENT_ID=DEPARTMENT_IDX and EMPLOYEE_POSITION_ID=POSITION_IDX","EMPLOYEE_IDX","EMPLOYEE_IDX,EMPLOYEE_FIRST_NAME,EMPLOYEE_MIDDLE_NAME,EMPLOYEE_LAST_NAME,EMPLOYEE_POSITION_ID,EMPLOYEE_DEPARTMENT_ID,EMPLOYEE_START_DATE,EMPLOYEE_DESK_PHONE,EMPLOYEE_EXTENSION,EMPLOYEE_MOBILE,EMPLOYEE_EMAIL");
else //code for other operations - i.e. update/insert/delete
$form->render_table("employees","EMPLOYEE_IDX","EMPLOYEE_FIRST_NAME,EMPLOYEE_MIDDLE_NAME,EMPLOYEE_LAST_NAME,EMPLOYEE_POSITION_ID,EMPLOYEE_DEPARTMENT_ID,EMPLOYEE_START_DATE,EMPLOYEE_DESK_PHONE,EMPLOYEE_EXTENSION,EMPLOYEE_MOBILE,EMPLOYEE_EMAIL");
?>[/code]
detailEmployeeForm.php (xml structure for the form)
[code]<?php
include “…/include.php”;
if( isset( $_GET['id'] ) )
$id = $_GET['id'];
$myrowid = array("","","","","","","","","","","");
if( isset( $id) ){
mysql_query("set charset latin2", $db);
$sql = "select * from employees, positions where EMPLOYEE_IDX = $id and EMPLOYEE_POSITION_ID = POSITION_IDX";
$result = mysql_query( $sql, $db );
if( !$result )
die("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<items>\n\t<item type=\"error\" value=\"" . mysql_error() . "\"/>\n</items>\n");
$myrow = mysql_fetch_array( $result );
$position_selected = $myrow['POSITION_IDX'];
$sql = "select * from employees, departments where EMPLOYEE_IDX = $id and EMPLOYEE_DEPARTMENT_ID = DEPARTMENT_IDX";
$result = mysql_query( $sql, $db );
if( !$result )
die("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<items>\n\t<item type=\"error\" value=\"" . mysql_error() . "\"/>\n</items>\n");
$myrow = mysql_fetch_array( $result );
$department_selected = $myrow['DEPARTMENT_IDX'];
$sql = "select * from employees where EMPLOYEE_IDX = '$id'";
$result = mysql_query( $sql, $db );
if( !$result )
die("\t<item type=\"error\" value=\"" . mysql_error() . "\"/>");
$myrowid = mysql_fetch_array( $result );
}
if ( stristr( $_SERVER['HTTP_ACCEPT'], "application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml");
}
else {
header("Content-type: text/xml");
}
echo "<?xml version=\"1.0\" encoding=\"iso-8859-2\"?>\n";
echo "<items>\n";
echo "\t<item type=\"settings\" inputWidth=\"200\"/>\n";
if( isset( $id ) )
echo "\t<item type=\"hidden\" name=\"index\" bind=\"EMPLOYEE_IDX\" value=\"" . $myrowid['EMPLOYEE_IDX'] . "\"></item>\n";
else
echo "\t<item type=\"hidden\" name=\"index\" bind=\"EMPLOYEE_IDX\" value=\"\"></item>\n";
echo "\t<item type=\"label\" label=\"Personal data\" />\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"first_name\" label=\"First name\" bind=\"EMPLOYEE_FIRST_NAME\" value=\"" . $myrowid['EMPLOYEE_FIRST_NAME'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"first_name\" label=\"First name\" bind=\"EMPLOYEE_FIRST_NAME\" value=\"\" position=\"label-top\"></item>\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"middle_name\" label=\"Middle name\" bind=\"EMPLOYEE_MIDDLE_NAME\" value=\"" . $myrowid['EMPLOYEE_MIDDLE_NAME'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"middle_name\" label=\"Middle name\" bind=\"EMPLOYEE_MIDDLE_NAME\" value=\"\" position=\"label-top\"></item>\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"last_name\" label=\"Last name\" bind=\"EMPLOYEE_LAST_NAME\" value=\"" . $myrowid['EMPLOYEE_LAST_NAME'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"last_name\" label=\"Last name\" bind=\"EMPLOYEE_LAST_NAME\" value=\"\" position=\"label-top\"></item>\n";
echo "\t<item type=\"newcolumn\" offset=\"10\"/>\n";
echo "\t<item type=\"label\" label=\"Organisation data\" />\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"start_date\" dateFormat=\"%Y-%m-%d\" label=\"Start date\" bind=\"EMPLOYEE_START_DATE\" enableTime=\"false\" calendarPosition=\"right\" value=\"" . $myrowid['EMPLOYEE_START_DATE'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"start_date\" dateFormat=\"%Y-%m-%d\" label=\"Start date\" bind=\"EMPLOYEE_START_DATE\" enableTime=\"false\" calendarPosition=\"right\" value=\"\" position=\"label-top\"></item>\n";
echo "\t<item type=\"select\" name=\"position\" label=\"Position\" bind=\"EMPLOYEE_POSITION_ID\" position=\"label-top\">\n";
$sql = "select * from positions";
$result = mysql_query( $sql, $db );
if( !$result )
die("\t<item type=\"error\" value=\"" . mysql_error() . "\"/>");
while( $myrow = mysql_fetch_array( $result ) ){
echo "\t\t<option text=\"" . $myrow['POSITION_NAME'] . "\" value=\"" . $myrow['POSITION_NAME'] . "\"";
if( isset( $id ) && $myrow['POSITION_IDX'] == $position_selected )
echo " selected=\"true\"/>\n";
else
echo "/>\n";
}
echo "\t</item>\n";
echo "\t<item type=\"select\" name=\"department\" label=\"Department\" bind=\"EMPLOYEE_DEPARTMENT_ID\" position=\"label-top\">\n";
$sql = "select * from departments";
$result = mysql_query( $sql, $db );
if( !$result )
die("\t<item type=\"error\" value=\"" . mysql_error() . "\"/>\n");
while( $myrow = mysql_fetch_array( $result ) ){
echo "\t\t<option text=\"" . $myrow['DEPARTMENT_NAME'] . "\" value=\"" . $myrow['DEPARTMENT_NAME'] . "\"";
if( isset( $id ) && $myrow['DEPARTMENT_IDX'] == $department_selected )
echo " selected=\"true\"/>\n";
else
echo "/>\n";
}
echo "\t</item>\n";
echo "\t<item type=\"newcolumn\" offset=\"10\"/>\n";
echo "\t<item type=\"label\" label=\"Contact data\" />\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"desk_phone\" label=\"Desk phone\" bind=\"EMPLOYEE_DESK_PHONE\" value=\"" . $myrowid['EMPLOYEE_DESK_PHONE'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"desk_phone\" label=\"Desk phone\" bind=\"EMPLOYEE_DESK_PHONE\" value=\"\" position=\"label-top\"></item>\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"extension\" label=\"Extension\" bind=\"EMPLOYEE_EXTENSION\" value=\"" . $myrowid['EMPLOYEE_EXTENSION'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"extension\" label=\"Extension\" bind=\"EMPLOYEE_EXTENSION\" value=\"\" position=\"label-top\"></item>\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"mobile\" label=\"Mobile\" bind=\"EMPLOYEE_MOBILE\" value=\"" . $myrowid['EMPLOYEE_MOBILE'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"mobile\" label=\"Mobile\" bind=\"EMPLOYEE_MOBILE\" value=\"\" position=\"label-top\"></item>\n";
if( isset( $id ) )
echo "\t<item type=\"input\" name=\"email\" label=\"Email\" bind=\"EMPLOYEE_EMAIL\" value=\"" . $myrowid['EMPLOYEE_EMAIL'] . "\" position=\"label-top\"></item>\n";
else
echo "\t<item type=\"input\" name=\"email\" label=\"Email\" bind=\"EMPLOYEE_EMAIL\" value=\"\" position=\"label-top\"></item>\n";
echo "\t<item type=\"label\" label=\"\" />\n";
echo "\t<item type=\"block\">\n";
echo "\t\t<item type=\"button\" name=\"submit\" value=\"Save changes\" command=\"save\" position=\"absolute\" inputTop=\"20\" inputLeft=\"90\"/>\n";
echo "\t</item>\n";
echo "</items>\n";
?>[/code]
Now I have tried for few days many things and combinations of tricks suggested through the forum and docs - no idea why it does not work - should be simple thing to accomplish right? Nah, instead I am getting really frustrated of my lack of knowledge and understanding how the things work in DHTMLX lib 
Any help will be very much appreciated (on my wife’s behalf too since she starts to complain about me spending nights with my PC instead of her).