Default button (on 'Enter') - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Enter, jqxwindow, okButton, window

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Default button (on 'Enter') Posts

April 29, 2013 at 12:59 pm Default button (on 'Enter') #20231

Participant

Hi,

I looked through the demos, documentation, and forum, but couldn’t seem to find any references for establishing a default action for the ‘Enter’ key. I’m setting up a dialog with an OK button and I want to preserve the default behavior of cancel/close on ‘Esc’ (IOW, I don’t want to modify the ‘keyboardCloseKey ‘ property). What is the best way to make my dialog return with ‘OK’ when pressing the ‘Enter’ key?

Thanks,
Terry

April 29, 2013 at 2:13 pm Default button (on 'Enter') #20238

Dimitar

Participant

Hello Terry,

Here is a possible solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var flag = 0;
            $('#jqxwindow').on('created', function (event) {
                if ($("#jqxwindow ").jqxWindow("autoOpen") == true) {
                    flag = 1;
                };
            });
            $("#jqxwindow ").jqxWindow({ height: 300, width: 300, theme: 'summer', okButton: $('#ok'), cancelButton: $('#cancel'), resizable: false, autoOpen: true });
            $('#jqxwindow').on('open', function (event) {
                flag = 1;
            });
            $('#jqxwindow').on('close', function (event) {
                flag = 0;
            });
            $(document).keydown(function (event) {
                if (flag == 1) {
                    $('#ok').click();
                };
            });
            $("#ok").click(function () {
                alert("OK");
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                <div>
                    Please click "OK", "Cancel" or the close button to close the modal window. The dialog
                    result will be displayed in the events log.
                </div>
                <div>
                    <div style="float: right; margin-top: 15px;">
                        <input type="button" id="ok" value="OK" style="margin-right: 10px" />
                        <input type="button" id="cancel" value="Cancel" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.