grid not updating data

osuwariboy · April 27, 2011, 3:02pm

Hi there,

    I have actually two questions. The first is that I'm having trouble having my grid save the changes to a database. Here's the code I have client-side:

function initGrid(source)
{
	var width = "";
	var largeurEcran = screen.width - 45;
	var derniereLargeur = 0;
	document.getElementById("gridbox").style.width = largeurEcran + "px";
	
	mygrid = new dhtmlXGridObject('gridbox');
	
	mygrid.setImagePath("js/dhtmlxGrid/codebase/imgs/");

	mygrid.setHeader("Division, Certificat, Adhérent, Sexe, Date de naissance, Âge, Date d'invalidité, Date premier paiement, Rente, Statut, Accepté jusqu'au," + 
					"Durée, S/M, Retour au travail, Date changement définition, Application RRQ/RPC, Décision RRQ/RPC, Intégration, Commentaire, Action, Action précédente");
	derniereLargeur = largeurEcran - (Math.floor(0.09 * largeurEcran) + Math.floor(0.09 * largeurEcran) + Math.floor(0.07 * largeurEcran) + 
					Math.floor(0.12 * largeurEcran) + Math.floor(0.12 * largeurEcran) + Math.floor(0.12 * largeurEcran) + 
					Math.floor(0.05 * largeurEcran) + Math.floor(0.09 * largeurEcran) +  Math.floor(0.15 * largeurEcran) + 
					Math.floor(0.05 * largeurEcran));
			
	width += (0.03 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.03 * largeurEcran) + "," + 
			(0.05 * largeurEcran) + "," + (0.03 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," +
			(0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.03 * largeurEcran) + "," + 
			(0.02 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," +
			 (0.05 * largeurEcran) + "," + (0.05 * largeurEcran) + "," + (0.07 * largeurEcran) + "," + (0.07 * largeurEcran) + "," + (0.07 * largeurEcran);
			
	mygrid.setInitWidths(width);
	mygrid.setColAlign("left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left");
	mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ed,ed,ro");
	mygrid.setColSorting("str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str");
	mygrid.enableAutoHeight(true);
	mygrid.enableMultiline(true);
	mygrid.obj.className = "obj";
	
	mygrid.setSkin("dhx_skyblue");
	//mygrid.attachHeader("#select_filter,#select_filter,#select_filter,#text_filter,#text_filter,#text_filter,#select_filter,#select_filter,#rspan,#rspan,#rspan");
	mygrid.loadXML("invaliditeDSFConnecteur.php");
	mygrid.init();
	
	var dp = new dataProcessor("invaliditeDSFConnecteur.php");
	//dp.setTransactionMode("POST",true);
	dp.init(mygrid);
	
	mygrid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue)
	{
		if (stage == 0)
		{
			putOverlay();
			var textEditor = document.getElementById("textEditor");
			textEditor.style.position = "absolute";
			textEditor.style.zIndex = "51";
			textEditor.style.display = "";
			textEditor.style.left = (tempX - 150) + "px";
			textEditor.style.top = tempY + "px";
			document.getElementById("zoneTexte").value = mygrid.cells(rId,cInd).getValue();
			document.getElementById("ligne").value = rId;
			document.getElementById("colonne").value = cInd;
			//alert(tempX + ";" + tempY);
			//mygrid.cells(rId,cInd).setValue("sdhdkjhf");
			return false;
		}
	});
}

function btnEnregistrerClick()
{
	mygrid.cells(document.getElementById("ligne").value, document.getElementById("colonne").value).setValue(document.getElementById("zoneTexte").value);
	mygrid.cells(document.getElementById("ligne").value, document.getElementById("colonne").value).cell.wasChanged = true;
	//dp.sendData(1);
	document.getElementById("textEditor").style.display = "none";
	document.body.removeChild(document.getElementById("overlay"));
}

function btnFermerClick()
{
	document.getElementById("textEditor").style.display = "none";
	document.body.removeChild(document.getElementById("overlay"));
}

function putOverlay()
{
	var overlay = document.createElement("DIV");
	overlay.className = "my_overlay";
	overlay.id = "overlay";
	document.body.appendChild(overlay);
} 

....

<div id="gridbox"></div>

<div id="textEditor" style="display:none;">
<input type="hidden" id="ligne" value="" />
<input type="hidden" id="colonne" value=""  />
<textarea id="zoneTexte" style="width:300px; height:90px;"></textarea>

<input type="button" id="btnEnregistrer" value="Enregistrer" onclick="javascript:btnEnregistrerClick();" />
<input type="button" id="btnFermer" value="Fermer"  onclick="javascript:btnFermerClick();" />
</div>
<script type="text/javascript">
initGrid("bla");
</script>

And then server-side:

function myUpdate($action)
{
	global $grid;
	$sql = "UPDATE tblinvaliditestatutdsf set Commentaire = \"" . $action->get_value('Commentaire') . "\", ActionActuelle = \"" . 
			$action->get_value('ActionActuelle') . "\" WHERE ID = " . $action->get_id();
	
	$grid->sql->attach("Update",$sql);
}


//code below is simplified - in real app you will want to have some kins session based autorization and input value checking

//include db connection settings
require_once('js/dhtmlxConnector/codebase/grid_connector.php');
require_once('include/connect.php');

$grid = new GridConnector($conn);
$grid->set_encoding("iso-8859-1");
$grid->enable_log("log.txt",true);
//$grid->render_table('tblinvaliditestatutdsf', "ID", "Division, Certificat");
$grid->render_table('tblinvaliditestatutdsf', "ID", "Division, Certificat, Adherent, Sexe, DateNaissance, Age, DateInvalidite, DatePremierPaiement," . 
				"Rente, Statut, DateFinAcceptation, Duree, UniteDuree, DateRetourTravail, DateChangementDefinition, ApplicationRRQRPC, DecisionRRQRPC," . 
				"Integration, Commentaire, ActionActuelle, DateReceptionDossier");
				
$grid->event->attach("beforeUpdate", "myUpdate");

So, first here’s what I already know: Client-side, I’m actually cancelling the update event with a “return false” statement in the onEditCell event. This is because I’m using a custom text-editor (the one provided with the standard list hiding almost all the text shown in my cells). So yes, of course, that’ll prevent the list from updating itself.

However, when someone actually presses “Save” on my custom editor, you’ll see I’m setting the “wasChanged” flag of the cell to ‘true’, but somehow, it doesn’t seem to be enough to make the grid commit the change to the database since the dataprocessor does not react. So, first question:

How can I make the grid commit the changes I made to the database even though the update event was cancelled?

Then, to test whether my connector was setup correctly, I removed the call to my custom text-editor and tried to just update the grid with the default behavior. Now, the connector is indeed called, but sadly, I get a “bad XML” (which might as well be ‘something went wrong, but I’m not telling you what it is’) error and nothing’s written in the log aside from the initial “Select” statement that populates the list.

So, second question:

What do I need to do, server-side, to make my connector work and commit the changes to the database? I’m using pretty much the same approach as the scheduler’s connector, which I’ve used a lot, but I think that might be where I went wrong.

Anyway, I’ve searched the forum and my issue seems to be similar to this one:

viewtopic.php?f=2&t=15235&p=46155&hilit=saving#p46155

I’m using grid 2.6 standard version as well as connector 1.0. In my case, this wasn’t an upgrade, I’ve been using grid 2.6 right off the bat and, just to make things clear: MY LOGS ARE EMPTY… so I really have no idea what the hell’s going on.

So, any help would be greatly appreciated,

Thanks in advance

Osu

osuwariboy · April 27, 2011, 7:19pm

Okay, after a few hours of testing, I was able to answer part of my problem. I used the debugging function and through that, was able to see the server response to the grid. So, what did the grid receive upon updating a row, something of the sort:

<row id='1'>
<cell><![CDATA[0]]</cell>
...
</row>

This is essentially the code the grid expects upon its initial creation. I have no idea why this is what the server sends back upon an update operation, my best guess is it reexcutes everything, including the render_table statement.

So, what did I do to fix this? I moved the creation code of the grid into a completely different file and then took the code from one of the samples and used it, as such:

require_once('include/connect.php');

function myUpdate()
{
	$sql = "UPDATE tblinvaliditestatutdsf set Commentaire = \"" . mysql_real_escape_string(utf8_decode($_GET['c18'])) . "\", ActionActuelle = \"" . 
			mysql_real_escape_string(utf8_decode($_GET['c19'])) . "\" WHERE ID = " . utf8_decode($_GET['gr_id']);
	
	mysql_query($sql) or die(mysql_error());
	
	return "update";
}

header("Content-type: text/xml");

$mode = $_GET["!nativeeditor_status"]; //get request mode
$rowId = $_GET["gr_id"]; //id or row which was updated 
$newId = $_GET["gr_id"]; //will be used for insert operation


switch($mode){
	case "inserted":
		//row adding request
		//$action = add_row();
	break;
	case "deleted":
		//row deleting request
		//$action = delete_row();
	break;
	default:
		//row updating request
		$action = myUpdate();
	break;
}

echo "<data>";
echo "<action type='".$action."' sid='".$rowId."' tid='".$newId."'/>";
echo "</data>";

Now, the update works and is inserted into the database without any mistakes. I hope this helps someone out there.

Osu

osuwariboy · April 27, 2011, 8:29pm

I finally got the answer to my second question. Instead of using:

mygrid.cells(document.getElementById("ligne").value, document.getElementById("colonne").value).cell.wasChanged = true;

I use:

dp.setUpdated(document.getElementById("ligne").value, true, "updated");

And everything is now fine and dandy.

Hope this helps someone out there

Osu