Detecting Enter pressed in AUI Dialog

Question

I want to detect if enter was used in html textfield i load into the Dialog.

If enter was pressed i want to simulate a click on the Save-Button.

i tried many things, basically pushing this code around:

 $(document).keypress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $("#resultTextArea").val("Enter gedrueckt");
            $(this).find("button:saveBtn").trigger("click");                                                                        
      }
});

Below is the AUI-Dialog (in which i tried above code)

          AUI().use('aui-dialog', 'liferay-portlet-url', function(A) {
                var dialog = new A.Dialog({
                                            title: 'New title',
                                            centered: true,
                                            modal: true,
                                            width: 500,
                                            height: 200,
                                            bodyContent:AUI().one('#addTestDialog'),
                                            buttons: [ 
                                                       { label : "Save" , id : "saveBtn" , handler : function(){ 
                                                            saveStuff();
                                                            this.close();
                                                        }
                                                       }
                                                        ],

                                            open: function() {
                                                $(document).keypress(function(e) {
                                                    if (e.keyCode == $.ui.keyCode.ENTER) {
                                                         $("#resultTextArea").val("Enter gedrueckt");
                                                        $(this).find("button:saveBtn").trigger("click");                                                                        
                                                    }
                                                });
                                            }

                }).render();
            });

And this is the html part that defines the body of the dialog:

<div style="display:none;">
  <div id="addTestDialog">

   <portlet:actionURL name="addNote" var="addNoteURL" />
    <br>
    <table style="width:100%;">
    <tr>
        <td>Name:</td>
        <td><input id="textInput" style="width:98%;height:20px;"></input></td>
    </tr>       
    </table> 
  </div>
</div>

I checked back with the API of AlloyUI and found this: http://deploy.alloyui.com/api/classes/Dialog.html

Under Attributes: There is no open which is used in every tutorial/code i found. Therefore this cannot work (at least i think so). i tested initialize but this wont work either.

thank you for any help/hints.

Answer 1

You can use jQuery to achieve this task

i.e

$("#saveBtn").keypress(function(event){
  var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
      // do what you want
    }
});

HTH

Answer 2

It now works and this is my code (on enter pressed it does the same function as the savebtn and closes the dialog):

$(document).ready(function(){
  $("#scenario_add_btn").click(function(){             
     AUI().use('aui-dialog', 'liferay-portlet-url', function(A) {
       var dialog = new A.Dialog({
                                            title: 'New title',
                                            centered: true,
                                            modal: true,
                                            width: 500,
                                            height: 200,
                                            bodyContent:AUI().one('#addTestDialog'),
                                            buttons: [ 
                                                       { label : "Save" , id : "saveBtn" , handler : function(){ 
                                                            saveStuff();
                                                            this.close();
                                                        }
                                                       }
                                                        ]
                }).render();
                $("#textInput").keypress(function(event) {
                     var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == '13') {
                        saveStuff();
                        dialog.close();
                    }
                  });

            });



     });/*btn.click*/
});/*document ready*/

Answer 3

The keyCode for enter is 13 try replacing $.ui.keyCode.ENTER with 13 and check if it works.