jQuery UI Dialog will not open

Question

I am trying to bring up a jQuery UI Dialog in response to form input. Consider:

<html>
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
      <script src="checkLogin.js"></script>
   </head>
   <body>
      <form>
         <label>User Name:</label><input onkeydown="checkSubmitKey(event)"><br>
         <input id="submit" name="submit" type="button" onclick="checkLogin()" value="Submit">
      </form>
      <div id="dialog" title="Alert" style="display: none;"></div>
   </body>
</html>

where checkLogin.js is:

function checkSubmitKey(ev) {
    if(ev.keyCode == 13) {
        checkLogin();
    }
}

function checkLogin() {
   showAlert("Hello");
}

function showAlert(str) {
    $( "#dialog" ).html(str);
    $( "#dialog" ).dialog({
        modal: true,
        title: "Alert",
        buttons: {
            "OK": function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

The problem is that the Dialog only shows when I press the "Submit" button; if I press Enter in the "User Name" text field, nothing happens.

(If I change function checkLogin to

function checkLogin() {
   alert("ok");
   showAlert("Hello");
}

the Dialog appears when I press Enter also.)

Answer 1

You need to prevent the default action of the Enter key. Change the JS to:

function checkSubmitKey(ev) {
    if(ev.keyCode == 13) {
        ev.preventDefault();
        checkLogin();
    }
}

FIDDLE

jQuery UI Dialog will not open

Question

1 answers

solution1
1 ACCPTED 2014-06-29 21:50:24

jQuery UI Dialog will not open

Question

1 answers

solution1 1 ACCPTED 2014-06-29 21:50:24

solution1
1 ACCPTED 2014-06-29 21:50:24