DataProcessor not updating Grid PHPConnector

Suite and Optimus Suite 5
#1

I have a grid defined as below:

gridListMembers = layoutDetails.cells("a").attachGrid(); gridListMembers.setImagePath(imagePath); gridListMembers.setHeader("ListID,List Members"); gridListMembers.setColTypes("ro,ro"); gridListMembers.setColAlign("left,left"); gridListMembers.setColSorting("int,str"); gridListMembers.setInitWidths("20,*"); gridListMembers.enableMultiselect(true); gridListMembers.loadXML("lists_processor.php?do=getlistmembers&listid=" + ListID); gridListMembers.init();

And a DataProcessor:

dpListMembers = new dataProcessor("lists_processor.php?do=getlistmembers"); dpListMembers.init(gridListMembers);

I’m using a PHP GridConnector:

$listID = filter_input(INPUT_GET,"listid"); $connector = new GridConnector($mysqli,"MySQLi"); // Connector Object $connector->enable_log("lists_processor_log.txt"); // Enable logging $connector->filter("ListID",$listID); $connector->render_table("Lists_Members","ListMemberID","ListID,MemberData");

My problem is that when I add a row to the grid, the DataProcessor indicates that it is inserting the row, but the log on the GridConnector only shows it returning the rows in the table. It’s like it’s not receiving the instruction to insert the row. This is my first time using a DataProcessor on a grid, but I’ve had it work successfully with forms using the same methods as I’ve used here (with a FormConnector instead of GridConnector, of course).

I saw one other post that described similar behavior, but the person indicated that they had included the DataProcessor JavaScript file in addition to using the DHTMLX Suite. I am also using the Suite, but have not included the DataProcessor file seperately, so his resolution won’t work for me.

#2

Please try to include connector.js on the page ( after other dhtmlx files )
File can be taken from connector’s package

#3

I’m already including that file.

Here’s the whole of my index.html file:

[code]

Lists Maintenance /*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; } 
<script type="text/javascript">
	// Declare global variables
	var viewBranch;
	viewBranch = "Q7";	// Default branch to Patterson
	var listTypeOptions = [
		{text: "Email", value: "email"},
		{text: "User", value: "user"}
	];
	var branchOptions = [
		{text: "Patterson", value: "Q7"},
		{text: "Mangas", value: "Q2"},
		{text: "All", value: "all"}
	]
	
	// Declare global DHTMLX object variables
    var layoutMain,layoutDetails,menuMain,ListsWins;
	var toolbarDetails;
	var gridLists;
	var imagePath = "/Resources/dhtmlx/imgs/";
	
	// Functions
	function AddListMember(ListID) {
		var data = window.prompt("List member data:", "");
		if (data === null || typeof data == "undefined")
			return;
		gridListMembers.addRow(gridListMembers.uid(), [ListID,data]);
	}
	
	function LoadListsGrid(selected) {
		gridLists = layoutMain.cells("a").attachGrid();
		gridLists.setImagePath(imagePath);
		gridLists.setHeader("Name,Type,Branch,Members");
		gridLists.setColTypes("ro,ro,ro,ro");
		gridLists.setColAlign("left,left,left,right");
		gridLists.setColSorting("str,str,str,int");
		gridLists.setInitWidths("75,75,50,80");
		gridLists.loadXML("lists_processor.php?do=getlists&branch=" + viewBranch);
		gridLists.init();
		gridLists.attachEvent("onRowDblClicked",function(rID,cInd) {
			ShowDetailsWindow(rID);
		});
		
		if (selected>0) {
			gridLists.selectRowById(selected);	// select the row passed into the function automatically
		}
	}
	
	function ShowDetailsWindow(ListID) {
		winDetails = ListsWins.createWindow("winDetails",0,0,450,300);
		winDetails.setText("Edit List");
		winDetails.centerOnScreen();
		//alert(ListID);
		
		// layoutDetails - Details window layout
		layoutDetails = winDetails.attachLayout("2U");
		layoutDetails.cells("a").setText("Members");
		layoutDetails.cells("b").setText("List Info");
		
		// toolbarDetails - Details pane toolbar
		toolbarDetails = layoutDetails.cells("a").attachToolbar();
		toolbarDetails.addButton("add",0,"Add", null, null);
		toolbarDetails.addButton("remove",1,"Remove", null, null);
		//toolbarDetails.disableItem("remove");
		toolbarDetails.attachEvent("onClick",function(id) {
			switch(id){
				case "add":
					AddListMember(ListID);
					break;
				case "remove":
					gridListMembers.deleteSelectedRows();
					break;
			}
		});
		
		// gridListMembers
		gridListMembers = layoutDetails.cells("a").attachGrid();
		gridListMembers.setImagePath(imagePath);
		gridListMembers.setHeader("ListID,List Members");
		gridListMembers.setColTypes("ro,ro");
		gridListMembers.setColAlign("left,left");
		gridListMembers.setColSorting("int,str");
		gridListMembers.setInitWidths("20,*");
		gridListMembers.enableMultiselect(true);
		gridListMembers.loadXML("lists_processor.php?do=getlistmembers&listid=" + ListID);
		gridListMembers.init();
		
		// formListDetails
		formListDetails = layoutDetails.cells("b").attachForm();
		var formStruct = [
			{type: "settings", offsetTop: 10, offsetLeft: 10, position: "label-top", labelWidth:80},
			{type: "input", name: "ListName", label: "<b>Name</b>"},
			{type: "select", name: "ListType", label: "<b>Type</b>", options:listTypeOptions},
			{type: "select", name: "Branch", label: "<b>Branch</b>", options:branchOptions},
			{type: "button", name: "btnSubmit", value: "Update"}
		];
		formListDetails.loadStruct(formStruct,"JSON");
		formListDetails.load("lists_processor.php?do=listform&id=" + ListID);
		formListDetails.attachEvent("onButtonClick", function(name, command) {
			dpListDetails.sendData();
		});
		
		// List Details DataProcessor
		dpListDetails = new dataProcessor("lists_processor.php?do=listform");
		dpListDetails.init(formListDetails);
		dpListDetails.attachEvent("onAfterUpdate", function(sid, action, tid, tag){
			LoadListsGrid(ListID);
		});
		
		// List Members DataProcessor
		dpListMembers = new dataProcessor("lists_processor.php?do=getlistmembers");
		dpListMembers.init(gridListMembers);
		dpListMembers.attachEvent("onAfterUpdate", function(sid,action,tid,tag){
			LoadListsGrid(ListID);
		});
	}
	
	function ShowNewListWindow() {
		winNewList = ListsWins.createWindow("winNewList",0,0,300,200);
		winNewList.setText("Create New List");
		winNewList.centerOnScreen();
		formNewList = winNewList.attachForm();
		var formStruct = [
			{type: "settings", offsetTop: 10, labelAlign: "right", labelWidth:80},
			{type: "input", name: "ListName", label: "Name"},
			{type: "select", name: "ListType", label: "Type", options:listTypeOptions},
			{type: "select", name: "Branch", label: "Branch", options:branchOptions},
			{type: "button", name: "btnSubmit", value: "Create",offsetLeft:80}
		];
		formNewList.loadStruct(formStruct,"JSON");
		formNewList.attachEvent("onButtonClick", function(name, command) {
			dpNewList.sendData();
			LoadListsGrid();
		});
		
		// New List DataProcessor
		dpNewList = new dataProcessor("lists_processor.php?do=listform");
		dpNewList.init(formNewList);
	}
	
	// DHTML Construction
	dhtmlx.image_path = imagePath;
	dhtmlxEvent(window,"load",function(){
		// SchedulerWins - Windows Object
		ListsWins = new dhtmlXWindows();	// Initialize dhtmlXWindows Object
		
		// layoutMain - Main window layout
		layoutMain = new dhtmlXLayoutObject(document.body,"1C");
		layoutMain.cells("a").setText("Lists");
		
		// menuMain - Main menu
		menuMain = layoutMain.cells("a").attachMenu();
		menuMain.addNewSibling(null,"newlist","New List",false,null,null);
		menuMain.attachEvent("onClick",function(id) {
			switch(id) {
				case "newlist":
					ShowNewListWindow();
					break;
			}
		});
		
		LoadListsGrid();
	})
</script>
[/code]

And here’s my lists_processor.php file:

[code]<?php
require($_SERVER[‘DOCUMENT_ROOT’]."/Resources/dhtmlx/codebase/connector/grid_connector.php");
require($_SERVER[‘DOCUMENT_ROOT’]."/Resources/dhtmlx/codebase/connector/form_connector.php");
require($_SERVER[‘DOCUMENT_ROOT’]."/Resources/dhtmlx/codebase/connector/db_mysqli.php");

$do = filter_input(INPUT_GET,“do”);

// Set Page Header for XML content
if ( stristr($_SERVER[“HTTP_ACCEPT”],“application/xhtml+xml”) ) { header(“Content-type: application/xhtml+xml”); }
else { header(“Content-type: text/xml”); }

// Set database to be used for MySQL queries
$database = “test”;
if (!$mysqli = new mysqli(“q7seng”,“user”,“mysqluser”,$database)) {
die("Could not connect to the following database: " . $database . “”);
}

switch($do) {
case “getlists”:
$branch = filter_input(INPUT_GET,“branch”);
$sql = “SELECT ListID,ListName,ListType,Branch,(SELECT Count(1) FROM Lists_Members WHERE Lists_Members.ListID = Lists.ListID) AS Members FROM Lists”;
if (strtolower($branch) != “all”) { $sql .= " WHERE Branch = ‘" . $branch . "’"; }
$connector = new GridConnector($mysqli,“MySQLi”); // Connector Object
$connector->render_complex_sql($sql,“ListID”,“ListName,ListType,Branch,Members”);
break;
case “listform”:
$connector = new FormConnector($mysqli,“MySQLi”); // Connector Object
//$connector->enable_log(“lists_processor_log.txt”); // Enable logging
$connector->render_table(“Lists”,“ListID”,“ListName,ListType,Branch”);
break;
case “getlistmembers”:
$listID = filter_input(INPUT_GET,“listid”);
$connector = new GridConnector($mysqli,“MySQLi”); // Connector Object
$connector->enable_log(“lists_processor_log.txt”); // Enable logging
$connector->filter(“ListID”,$listID);
$connector->render_table(“Lists_Members”,“ListMemberID”,“ListID,MemberData”);
break;
}
?>[/code]

As you can see, I have a FormConnector in use also, and it works correctly. Which is why I’m surprised that the GridConnector isn’t working for me.

#4

The situation when it dataprocessor works for one component and doesn’t work for other one is really confusing.

There are two way, how problem similar to one in your case, can occurs:

  • connector.js is not included on the page
  • dataprocessor initialized with some custom data sending mode

Your code does include connector and do not use any custom modes, so it must work correctly.
Try to use firebug|devtools and check the data call for saving

  • it must have editing=true in the url
  • data must be sent as POST
  • POST contains “ids” parameter with id of updated row
  • data parameters names are encoded like {id}_c{index}
#5

Using devtools showed me that connector.js wasn’t being loaded because I had typed the path wrong. Once I corrected the path, the grid DataProcessor started working. So my problem is fixed, but that does raise the interesting question of how the FORM DataProcessor was working without connector.js. (No answer needed on that, just an interesting note.)

Thank you for all your help!