I am having trouble getting a key-press handler to work in both Firefox and Internet Explorer with the dialog produced via
appCtxt.getErrorDialog(). I want to accept an ENTER keystroke as equivalent to clicking on the OK button.
If I look for a DwtEvent.ONKEYPRESS event, it works in Firefox but not IE. If I look for a DwtEvent.ONKEYDOWN event, it works in Firefox but not IE.
Here is (a stripped-down version of) the code:
Code:
function Com_Example_Test() {} ;
Com_Example_Test.prototype = new ZmZimletBase() ;
Com_Example_Test.prototype.constructor = Com_Example_Test ;
Com_Example_Test.prototype.init = function ()
{
DBG.println(AjxDebug.DBG3,
"*** Entering Com_Example_Test ***") ;
return ;
}
Com_Example_Test.prototype.singleClicked = function ()
{
DBG.println(AjxDebug.DBG3, "*** Entering Com_Example_Test singleClicked ***") ;
var dwt_dialog = new DwtDialog({
parent:appCtxt._shell,
className:null,
title:"Find something"
}) ;
var OK_button_callback_function = function ()
{
// Hide the dialog box, do search, and return results (we pretend
// we got no results).
dwt_dialog.popdown();
this._displayInfoMessage("No results found.") ;
dwt_dialog.dispose(); // Delete the dialog box.
return ;
} ;
var CANCEL_button_callback_function = function ()
{
dwt_dialog.popdown(); // Hide the dialog box.
dwt_dialog.dispose(); // Delete the dialog box.
return ;
} ;
// Set the OK and Cancel button listeners.
dwt_dialog.setButtonListener(DwtDialog.OK_BUTTON,
new AjxListener(this, OK_button_callback_function));
dwt_dialog.setButtonListener(DwtDialog.CANCEL_BUTTON,
new AjxListener(this, CANCEL_button_callback_function));
// Make a copy of "this" so that we can use it in the keypress handler.
var temp_this = this ;
// Define a key-handler event function callback.
// If the Enter key is pressed, call the OK callback.
var handle_input_enter_key_callback = function(event)
{
var key = DwtKeyEvent.getCharCode(event);
if ( (key == 10) || (key == 13) )
{
OK_button_callback_function.call(temp_this) ;
return false ;
}
else
{
return true ;
}
}
// The first works with Firefox and not IE while the second works with
// IE and not Firefox.
dwt_dialog.setHandler(DwtEvent.ONKEYPRESS, handle_input_enter_key_callback); // OK with FF
//dwt_dialog.setHandler(DwtEvent.ONKEYDOWN, handle_input_enter_key_callback); // OK with IE
/* Construct the table with the text input box. */
var table = this.makeSearchTable(dwt_dialog) ;
// Add the table to dwt_dialog.
dwt_dialog._getContentDiv().appendChild(table);
// Show the dialog.
dwt_dialog.popup();
return ;
}
Com_Example_Test.prototype.makeSearchTable = function (object_DwtComposite)
{
// Make a <table> element.
var table = document.createElement('table') ;
// Make an input box.
var input_field = new DwtInputField({
parent: object_DwtComposite,
name: "search_field_dialog",
type: DwtInputField.STRING,
initialValue: "",
required: true,
size: 30,
}) ;
// Save the input field object.
this.searchInput = input_field ;
// Add a new row to end the table.
var row = table.insertRow(-1) ;
// We add two cells to this row: the text and the input.
var cell1 = row.insertCell(-1) ;
cell1.appendChild(document.createTextNode("Search for ")) ;
// Add the text input box to a new cell in the table row.
var cell2 = row.insertCell(-1) ;
cell2.appendChild(input_field.getHtmlElement()) ;
return table ;
}
Com_Example_Test.prototype._displayInfoMessage = function(msg, data)
{
var dlg = appCtxt.getErrorDialog();
dlg.reset();
dlg.setMessage(msg, data, DwtMessageDialog.INFO_STYLE, "title");
Com_Example_Test.console_log("about to call popup") ;
dlg.popup(null, true);
return ;
} ;
Com_Example_Test.console_log = function(obj)
{
// Try to write using Firebug console.log; do nothing if it fails.
try { console.log(obj) ; }
catch(e) { }
return ;
}