Validating a modal dialog by code, non using mouse (on ENTER key)

Validating a modal dialog by code, non using mouse (on ENTER key)

Hi,

I got some trouble when trying to validate a modal dialog when user hit [ENTER] key.

In my page, there are many little forms which can be validated only after a modal form asking for the "administrator" password.
For a better user experience, i catch the [ENTER] key and want to validate the modal dialog with this :
  1. $('.ui-button-text', $('.ui-dialog-buttonpane', $('#password').parent().parent())).click();
My problem is : when using [ENTER], the "N" validation will use the callback function "N" times, this code seems not destroy the current context.

ie: using the next code, and validating 3 times the modal password will alert 3 times the "ok" :

  1. <html>
      <head>   
        <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all" />   
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />   
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>   
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>            
       
      </head>
      <body>
     
        <script type="text/javascript">
        $(function() {
           
        $("#dialog-password").dialog({
                autoOpen: false,
                height: 300,
                width: 500,
                modal: true,
                buttons: {
                    'Ok': function() {
                alert("ok");
                            $(this).dialog('close');
                    }
                },
          open: function() {
            $('#password')
              .keypress(function(e){
                if (e.keyCode  == 13){
                  e.preventDefault();
                  $('.ui-button-text', $('.ui-dialog-buttonpane', $('#password').parent().parent())).click();
                }
              })
              .focus();
          },
                close: function() {
            $('#password').val("");
                }
            });
           
            $('.validate').click(function() {
          $('#dialog-password').dialog('open');
        });

        });
        </script>
       
        <div>
          -- FORM 1 ---
          <br /><br />
          <button id="button-form1" class="validate">Validate Form 1</button> 
        </div>
       
        <div>
          -- FORM 2 ---
          <br /><br />
          <button id="button-form2" class="validate">Validate Form 2</button> 
        </div>
       
        <div>
          -- FORM 3 ---
          <br /><br />
          <button id="button-form3" class="validate">Validate Form 3</button> 
        </div>

        <div id="dialog-password">
          <p>To validate this form, your password is required</p>
          <label for="password">Password : </label>
          <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </div>
       
       
      </body>
    </html>









































































Thanks for your help !