dhtmlxMessage button focus

Suite and Optimus Suite 5
#1

With dhtmlxMessage, is there a way to set the focus on the cancel button?

  var m = dhtmlx.message({
        title:	    'Delete Me',
        type:    'confirm', 
        ok:	    'Delete',
        cancel:  'Cancel',
        text:     'Sure you want to? '',
        callback: function(r){  }
    });

  // set focus to the Cancel button
#2

Nope, but you can swap labels

var m = dhtmlx.message({ title: 'Delete Me', type: 'confirm', ok: 'Cancel', //change labels cancel: 'Delete', text: 'Sure you want to? '', callback: function(r){ if (!r) delete_some(); //use ! because of changed labels } });

#3

Maybe there is another approach, here the problem:

I’ve added an onkeydown event in the form so that the enter key will fire whatever button in the form has focus.

When the Delete button in the form is pressed, the dhtmlxMessage opens. Then when the enter key is pressed, both the “Ok” event fires in the dhtmlxMessage and then the form’s onKeyDown event fire.

So I am one of 3 things might work:

  1. cancel the event bubble in the dhtmlxMessage callback
  2. add a tag to the button then focus to it.
  3. remove focus from the form prior to opening the message this would be ideal.

The dhtmlxMessage is so much nicer than what I used to use,it’s great.

After trying a few things, this looks like it’s working:

var m = dhtmlx.message({
        title:	'Delete Model',
        type:		'confirm', 
        ok:			'Delete',
        cancel: 'Cancel<a href="javascript:void" id="dhtmlxMessageFocusAnchor"></a>',
        text:   'Sure you want to?'',
        callback: function(r){ 
          if (r) del() 
        }
    });
var a = document.getElementById("dhtmlxMessageFocusAnchor");
a.focus();
a.parentNode.removeChild(a);
#4

In which browser you have such kind of problem ?

Code of message already attempts to move focus to the popup box and to block the onkeydown handler. So enter key must be processed by the confirm box and blocked automatically.

#5

I am using Chrome.

Here’s what happens:

  1. click on the delete button
  2. dhtmlx message opens
  3. press the enter key

At this point the dhtmlxMessage callback runs and then the message opens again because the form onKeyDown event is triggered. The onkeydown event in the form captures the enter key and if the type is a button, the button is clicked.

Here’s the code excerpt in the form onkeydown event:

			if (ev.keyCode==13 && this.getItemType(id)=='button') {
				this.clickButton(id)
				keyps.cancelEvent(ev); 
				return
			}