Edit on double click & updating db on keypress

I know there was a couple of threads already on this matter, but I'm having some difficulty with the example(s) that were provided in the following thread:

http://www.activewidgets.com/javascript.forum.1394.55/textbox-template-edit-on-double.html

What I'm trying to do is 1) have the user double-click on a cell to go into edit mode, 2) the user changes the cell value, and then 3) presses the enter key to submit a form with these new cell changes to update the database.

The one problem I'm having is that once the enter key is pressed I'm not getting the new updated cell contents, but the old value. But, what is strange is that that after I put an alert statement (for debugging only) at the beginning of the event funtion for the keypress then I end up getting the correct value.

Can someone explain why I'm not getting the updated cell contents? I have no idea why the alert statement (dialog) will cause the code to work once that dialog is dismissed.



Here's the code, which was provided in the above thread:

if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

My.Templates.Input = Active.Templates.Text.subclass();

My.Templates.Input.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});

// template variable provides temporary reference to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().className += " active-edit-mode ";
//template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}

editor.setEvent("onblur", switchToTextMode);
};

My.Templates.Input.create();





var gridObj = new Active.Controls.Grid;
gridObj.setId("grid1");

// set number of rows/columns
gridObj.setRowProperty("count", data1.length);
gridObj.setColumnProperty("count", 5);

// set the column and row data
gridObj.setDataProperty("text", function(i, j){return data1[i][j]});
gridObj.setColumnProperty("text", function(i){return columns1[i]});

// turn off multiple row selection
gridObj.setSelectionProperty("multiple", false);


// create editable text template
var template = new My.Templates.Input;

// assign new template to all columns
//gridObj.setColumnTemplate(template);

// assign new template to just the second column in grid
gridObj.setColumnTemplate(template, 1);

// disable arrow key nevigation
gridObj.setEvent("onkeydown", null);

// make input box selectable
gridObj.getTemplate("top").setEvent("onselectstart", gridObj.getEvent("onselectstart"));
gridObj.setEvent("onselectstart", null);


// provide methods for getting and setting data
gridObj.getDataText = function(i, j){return data1[i][j]};
gridObj.setDataText = function(value, i, j){data1[i][j] = value};


var row = gridObj.getTemplate("row");
row.setEvent("onkeydown",function(){this.action("myAction")});
gridObj.setAction("myAction",function(src){
if (event.keyCode==13) {
//alert("myAction called...");

var i=gridObj.getProperty("selection/index");
alert(gridObj.getDataProperty("text",i , 1));
//document.form.submit();
}
});




document.write(gridObj);

You said that you have a Form that gets submitted when you hit Enter. What is sounds like is that the Form is grabbing the Enter Key before the grid is and executing the post back to the server before the grid has a chance to update the data. I suggest that you replace the Submit button in the form with a standard button and simply call the Form.submit() method when clicked. That way, the grid can do it's thing without the Form getting in the way. If you really want to send the data back to the server after the user presses Enter, then you can let the grid change the data, then as the last line of your gridObj.setAction call, execute the Form.submit() method. This should work. I have never been a big fan of a "Submit" button. I always call a function that gathers the data I want to send to the server and make the call directly.

I've actually taken the form stuff out to see if it was causing me problems, but even without the form stuff it still doesn't work correctly. It just feels like something is going on with the event processing (guessing here), and ,somehow, when I use an alert statement for debugging it seems to change the behaviour or order of event processing.

here is the complete file that I'm testing. You'll see the alert message when you press enter. Once you dismiss it you'll get another alert with the new updated cell contents. Remove the first alert and it stops working properly.




<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->

<!-- the doctype tag above will cause the scrollbar for the grid to dissapear -->

<html>

<head>
<title>Grid :: Test</title>
<style> body, html {/*font: menu;*/ /*background: threedface;*/} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="./runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="./runtime/lib/grid.js"></script>


<!-- grid format -->
<style>
#grid1 {height: 200px; border: 1px solid black; /*border: 1px inset;*/ font: menu; background: white}

.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}




.active-edit-mode {
overflow: auto;
padding: 0px;
vertical-align: top;
}

.active-templates-input {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}

.active-templates-input.gecko {
display: block;
margin: 0px;
}

.active-templates-row, .active-controls-grid {
-moz-user-select: text;
}



/*
input{font-size:8pt;}
*/

</style>

<!-- grid data -->
<script>
var data1 = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"]
];


var columns1 = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];

</script>


<script>

function test() {
var index = gridObj.getSelectionProperty("index");
alert("Index of selected row: " + index );

if (index != -1)
alert("Selected data: \n" + data1[index] );
}
</script>


<script>
if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

My.Templates.Input = Active.Templates.Text.subclass();

My.Templates.Input.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.
var editor = new Active.HTML.INPUT;
editor.setClass("templates", "input");
editor.setAttribute("type", "text");
editor.setAttribute("value", function(){
return template.getItemProperty("text");
});

// template variable provides temporary reference to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().className += " active-edit-mode ";
//template.element().style.padding = 0;
template.element().innerHTML = editor;
editor.element().focus();
}

obj.setEvent("ondblclick", switchToEditMode);

function switchToTextMode(){
var value = editor.element().value;
template.setItemProperty("text", value);
template.refresh();
template = null;
}

editor.setEvent("onblur", switchToTextMode);
};

My.Templates.Input.create();

</script>

</head>
<body>
<p>
Editable Grid:
</p>

<!--<form name="form" method="post">-->

<div style="margin-left: auto; margin-right: auto; width: 700px; ">

<script>
var gridObj = new Active.Controls.Grid;
gridObj.setId("grid1");

// set number of rows/columns
gridObj.setRowProperty("count", data1.length);
gridObj.setColumnProperty("count", 5);

// set the column and row data
gridObj.setDataProperty("text", function(i, j){return data1[i][j]});
gridObj.setColumnProperty("text", function(i){return columns1[i]});

// turn off multiple row selection
gridObj.setSelectionProperty("multiple", false);


// create editable text template
var template = new My.Templates.Input;

// assign new template to all columns
//gridObj.setColumnTemplate(template);

// assign new template to just the second column in grid
gridObj.setColumnTemplate(template, 1);

// disable arrow key nevigation
gridObj.setEvent("onkeydown", null);

// make input box selectable
gridObj.getTemplate("top").setEvent("onselectstart", gridObj.getEvent("onselectstart"));
gridObj.setEvent("onselectstart", null);


// provide methods for getting and setting data
gridObj.getDataText = function(i, j){return data1[i][j]};
gridObj.setDataText = function(value, i, j){data1[i][j] = value};


var row = gridObj.getTemplate("row");
row.setEvent("onkeydown",function(){this.action("myAction")});
gridObj.setAction("myAction",function(src){
if (event.keyCode==13) {
alert("myAction called...");

var i = gridObj.getProperty("selection/index");


//alert(gridObj.getDataText(i , 1) );
alert(gridObj.getDataProperty("text",i , 1));

//document.form.val.value = gridObj.getDataProperty("text",i , 1);
//document.form.row.value = gridObj.getDataProperty("text",i , 0);

//alert ("c will be " + gridObj.getDataProperty("text",i , 1));
//alert ("form.val = " + document.form.val.value + "\n form.row = " + document.form.row.value);

//document.form.submit();
}
});




document.write(gridObj);


</script>

</div>

<!--
<input type="hidden" value="" name="val" id="val">
<input type="hidden" value="" name="row" id="row">
<input type="hidden" value="1" name="action" id="action">

</form>
-->

<p>
<input type="button" name="test" Value="Test Selection" onclick="javascript: test();">
</p>

</body>
</html>