jQuery UI Widgets Forums Dialogs and Notifications Window Default button (on 'Enter')

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') #20231

    Terry Foster
    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

    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/

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

You must be logged in to reply to this topic.