Question

I have a jQuery confirmation dialog that does not fire the event associated with the default button when the user presses Enter; when I use the mouse, the button behaves as expected.

The default button (‘Cancel’) does highlight when I press enter, but nothing else happens.

This is the dialog:

And here is the code that produces the above dialog:

$(document).ready(function () {

    $('#m_btnNext').click(function (e) {
            var my_messages = 'warning';
            if (my_messages.length > 0) {
                e.preventDefault();
                $('#dialog-confirm-withdraw').html(my_messages);
                $("#dialog-confirm-withdraw").dialog("open");
                return false;
            }
            return true;    
            });

        var cascadeConfirmWithdrawMarkup = "<div id='dialog-confirm-withdraw' title='Withdraw'><p>Set on build</p></div>";
        $(cascadeConfirmWithdrawMarkup).appendTo('body').hide();

        $('#dialog-confirm-withdraw').dialog({ title: '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Withdraw Warnings',
            width: 400,
            height: 175,
            resizable: false,
            draggable: false,
            modal: true,
            autoOpen: false,
            open: function () {
                $('.ui-dialog-buttonpane button:eq(1)').focus();
            },
            buttons: {
                "Proceed with withdraw": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
});

In its simplest form, this code works fine, but I am having tremendous difficulty pinpointing the culprit in my real form.

I commented out all other javascript so only the above code exists; no errors are logged to the console; yet nothing happens.

If there’s not an obvious error in my js above, what is the best way to find the needle in this haystack?

Masochists can download the full html page (with all javascript), here. I used FF’s Save As “Web Page, Complete” to create that zip.

Bear in mind that I am only adding functionality to this form; I did not create it.

Answer 1

In halcyonCommon.js you have a function called KeyListener() which is called on document load. That function adds an event listener for keydown, and it appears to be handling escape and enter keydown events for your whole document:

        case KeyCode.Enter:             
            if (el.tagName == "INPUT") {                    
                switch (el.type) {
                    case "checkbox" :
                    case "password" :
                    case "radio" :
                    case "text" : 
                        {   //Check for datebox and timebox, has controller --> onblur before click OK
                            if (el.Controller && el.Controller.onblur)
                                el.Controller.onblur({target : el});

                            return oThis.clickAction(oThis._DefaultButton, e); 
                        }
                    break;                      
                    case "file" ://ThamHNguyen, added 14-NOV-06
                        return oThis.clickAction(oThis._DefaultButton, e);
                        break;

                    default:
                        return true;
                }
            } else if (el.tagName == "SELECT") {
                return oThis.clickAction(oThis._DefaultButton, e);              
            } else if (el.tagName == "HTML" || el.tagName == "BODY" || el.tagName == "TD") { //"TD" : on IE only
                return oThis.clickAction(oThis._DefaultButton, e);              
            } else if (el.tagName == "TEXTAREA" || el.tagName == "A" ) {
                return true;
            } else {
                return false; //Prevent default button of IE
            }

See the last else case? Removing that solves the problem, but it’s possible that this will cause undesired behavior elsewhere in your program. If it does, you’ll need to add a third possible occasion for returning true (and therefore allowing normal behavior) in this line:

} else if (el.tagName == "TEXTAREA" || el.tagName == "A" )

For example:

} else if (el.tagName == "TEXTAREA" || el.tagName == "A" || el.tagName == "SPAN" )

…though that may not be specific enough.