Problem of send data when DHTMLXForm attach DHTMLXLayout

Suite and Optimus Suite 5
#1

I am currently helping my company to investigate the feasibility of using dhtmlx in our project.

I am doing a testing to send back DHTMLX Form data to server side. We have used attachForm() to attach a DHTMLX Form object to DHTMLX Layout. We can load a hardcode JSON datasource successfully. However, when I trigger form_2.send(…), I observe from firebug that request is sent to server side (Server can received the request) but no parameter is included in the POST header. If I detached the DHTMLX Form from DHTMLX Layout, everything work fine. The code is as follow:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>User Group Search</title>
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxLayout/codebase/dhtmlxlayout.css">
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
	
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxGrid/codebase/dhtmlxgrid.css">
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_blue.css">
	
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_blue.css">
	
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxForm/codebase/skins/dhtmlxform_dhx_web.css">
	
	<link rel="stylesheet" type="text/css" href="../script/dhtmlxTree/codebase/dhtmlxtree.css">
	
	<script src="../script/dhtmlxcommon.js"></script>
	<script src="../script/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
	<script src="../script/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
	<script src="../script/dhtmlxForm/codebase/dhtmlxform.js"></script>
	<script src="../script/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
	<script src="../script/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
	<script src="../script/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
	<script src="../script/dhtmlxTree/codebase/dhtmlxtree.js"></script>
	<script src="../script/dhtmlxTree/codebase/ext/dhtmlxtree_start.js"></script>
	<script src="../script/dhtmlx.js" type="text/javascript"></script>
	<script src="../script/BarMenu.js" type="text/javascript"></script>
    </head>
    <body>
       <div id="parentId" style="position: relative; width: 100%; height: 100%;"></div>
       <script>
		var main_layout = new dhtmlXLayoutObject('parentId', '3E');
		
                //important
		var a = main_layout.cells('a');
		a.setHeight('100');
		a.hideHeader();
		a.fixSize(0, 1);
		
		var str = [ {
			type : "block",
			list : [ {
				type : "select",
				name : "searchBy",
				label : "Search by : ",
				options : [ {
					text : "User",
					value : "User"
				}, {
					text : "Group",
					value : "Group"
				}, ],
				labelWidth : 100,
				inputWidth : 80
			}, ]
		}, {
			type : "block",
			list : [ {
				type : "input",
				name : "id",
				label : "ID : ",
				labelWidth : 100,
				inputWidth : 180
			}, {
				type : "newcolumn"
			}, {
				type : "input",
				name : "name",
				label : "Name : ",
				value : '<s:property value="name"/>',
				labelWidth : 100,
				inputWidth : 300,
				offsetLeft : 20
			}, ]
		}, {
			type : "block",
			list : [ {
				type : "select",
				name : "division",
				label : "Division : ",
				options : [ {
					text : "ADD",
					value : "ADD"
				} ],
				labelWidth : 100,
				inputWidth : 180
			}, {
				type : "newcolumn"
			}, {
				type : "select",
				name : "team",
				label : "Team : ",
				labelWidth : 100,
				inputWidth : 180,
				value : "",
				offsetLeft : 20
			}, {
				type : "newcolumn"
			}, {
				type : "button",
				name : "form_button_1",
				label : "Reset",
				value : "Reset",
				width : "80",
				inputWidth : "50",
				offsetLeft : 150
			}, {
				type : "newcolumn"
			}, {
				type : "button",
				name : "form_button_2",
				label : "Search",
				value : "Search",
				width : "80",
				inputWidth : "50",
				offsetLeft : 10
			} ]
		}, ];

		var form_2 = a.attachForm(str);
		form_2.setSkin('dhx_web');
		form_2.attachEvent("onButtonClick",function(buttonID){
			    form_2.send("../searchUser/initial.action", "post", function(xml){
			});
		});

                //Not important, just for integration with grid
		var b = main_layout.cells('b');
		b.hideHeader();
		var grid_1 = b.attachGrid();
		grid_1.setImagePath('../script/dhtmlxGrid/codebase/imgs/');
		grid_1.setIconsPath('../script/dhtmlxGrid/codebase/imgs/');

		grid_1.setHeader([ "ID", "Name", "Description", "Division", "Team" ]);
		grid_1.setColTypes("ro,ro,ro,ro,ro");

		grid_1.setColSorting('str,str,str,str,str');
		grid_1.setInitWidths('100,300,425,150,150');
		grid_1.init();
		//	grid_1.load('./grid2.xml', 'xml');
		grid_1.load('../test1/createGridJason.action', 'json');

                //Not important
		var c = main_layout.cells('c');
		c.setHeight('60');
		c.hideHeader();
		c.fixSize(0, 1);
		var str2 = [

		{
			type : "block",
			list : [ {
				type : "button",
				name : "form_button_4",
				label : "Back",
				value : "Back"
			}, {
				type : "newcolumn"
			}, {
				type : "button",
				name : "form_button_1",
				label : "Browse",
				value : "Browse",
				offsetLeft : 450
			}, {
				type : "newcolumn"
			}, {
				type : "button",
				name : "form_button_3",
				label : "Modify",
				value : "Modify",
				offsetLeft : 10
			}, {
				type : "newcolumn"
			}, {
				type : "button",
				name : "form_button_2",
				label : "Create",
				value : "Create",
				offsetLeft : 10
			}, {
				type : "newcolumn"
			}, {
				type : "button",
				name : "form_button_5",
				label : "Reset",
				value : "Unlock User / Reset Password",
				offsetLeft : 10
			}, ]
		},

		];
		var form_2 = c.attachForm(str2);
		form_2.setSkin('dhx_web');
	</script>
</body>
</html>

If form is detached from Layout, it returns following POST parameter to server:
searchBy=User&id=undefined&name=aaa&division=ADD&team=-1

#2

Hi

Could you please provide completed demo (including all js/css files) or direct link?
You can also send it to support at dhtmlx dot com (please include link to this topic).

#3

I seem to be having what may be a related problem.
I, too, have a form attached to a layout. It is a simple one - a label, one password field, a submit button.
But when I use the send() function, it submits the data to the destination php file, but does not relinquish control of the page, instead it appears to be acting like an AJAX function and returning the data to the calling page.
When I rewrite the script to display the results in an alert, the alert displays the HTML of the redirect from the PHP page.

Here is the script on the page with layout:

    <script>
      var layout, loginForm;
      function pageSetup(){
        layout = new dhtmlXLayoutObject(document.body,"1C");
        loginForm = layout.cells("a").attachForm();
        loginForm.loadStruct("loginForm.xml");
        layout.cells("a").setText("Login Screen");
        //layout.cells("a").loadXML("loginForm.xml");
        loginForm.attachEvent("onButtonClick", function(name, command){
          //var valPass=loginForm.getItemValue("passcode");
          //alert("Button "+name+" was clicked with form value " + valPass);
          if(name=="submit") {
            //alert("Button Clicked");
            this.send("userVerify.php")};
        });
        layout.init();
      };
    </script>

Here is the XML for the form:

<?xml version="1.0" encoding="UTF-8"?>
<items>
  <item type="label" label="This system is for the use of authorized persons only." offsetTop="20" offsetLeft="15"/>
  <item type="password" name="passcode" label="Password" offsetTop="20" offsetLeft="15"/>
  <item type="button" command="submit" name="submit" value="Log In" offsetLeft="15" offsetTop="20"/>
</items>
#4

Hi all

localy form’s send() works fine for both cases when form is attached to layout and when it stand-alone. please provide completed demo to check issue or direct link.

#5

Since my environment includes a dataconnector to a MySQL database, how am I to create a functional demo? I cannot give you access to my customer’s data.

#6

Hi

as an option - you can make a copy of your project, the same db struct as you’re using, fill 2-3 random records (or 1 will enough, just to demonstrate issue) and send us link to support@dhtmlx.com no needs to share any private data. please include link to this thread if any.