Подтвердите и закройте диалог по клавише ввода

Question

У меня есть диалог jquery с формой.Он отлично работает, когда пользователь нажимает кнопку отправки.Он проверяет, вводит новую запись в БД, закрывает и обновляет таблицу в родительском окне.Все работает так же, когда нажата клавиша ввода, за исключением того, что диалоговое окно не закрывается.Я надеюсь, что кто-то может вычеркнуть мою ошибку.Я также использую плагин проверки и плагин Datatables.Спасибо

  <div id="add-dialog-container" title="Add New Manufacturer" style="display:none;">
  <div class="validateTips">All form fields are required.</div>
  <form id="add-dialogForm" class="dialogForms">
  <input type="hidden" id="crud" name="crud" value="c" />
  <fieldset>
  <label for="Manufacturer" class="requiredBold">*Manufacturer:</label>
  <input type="text" name="Manufacturer" id="Manufacturer" class="text ui-widget-content ui-corner-all" />
   <label for="Active" class="requiredBold">*Active:</label>
  <input name="Active" class="radio" type="radio" id="ActiveYes" value="1" checked="checked" /> 
  Yes&nbsp;&nbsp;
  <input name="Active" class="radio" type="radio" id="ActiveNo" value="0" /> No
  </fieldset>
  </form>
  </div> 

    $(function() {
    var $this = $("#add-dialogForm");
    var originalContent;
    $( "#add-dialog-container" ).dialog({
        autoOpen: false,
        height: 220,
        width: 300,
        modal: true,
        buttons: {
            "Save": function() {
                if($this.valid()) {
                    $this.submit();
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        open : function(event, ui) { 
            originalContent = $this.html();
        },
        close: function() {
            $this.find(":input,:radio,:checkbox").removeClass( "ui-state-error" );
            $this.html(originalContent);
        }
    });

    // *** validate and post add new record *** //
    $("#add-dialogForm").validate({
        rules: {
            Manufacturer: {required: true, minlength: 1, maxlength: 100},
            Active: {required: true},
            },
        messages: {
            Manufacturer: "*Manufacturer is required",
            Active: "*Active is required",
            },
        submitHandler: function(form) {
            var dataToSend = $(form).serialize();
            jQuery(form).ajaxSubmit({
                type: "post",
                url: crudURL,
                data: dataToSend,
                success: function(){ 
                    oTable.fnReloadAjax();
                }
            })
        }
    }); // *** end validate add *** //

    $( "#add-new" ).click(function() {
            $("#add-dialog-container").dialog( "open" );
            $("#add-dialog-container").removeAttr("display");
            $("#Manufacturer").focus();
    });
});

Answer 1

Когда вы нажимаете Enter в форме, она отправляет форму.Таким образом, ваш submitHandler для $ .validate сработал.Что вы можете сделать, так это изменить порядок своих звонков, чтобы закрыть диалоговое окно после успешной отправки.В обработчике кнопки «Сохранить» просто сделайте следующее:

$this.submit();

Вам не нужно вручную проверять, является ли форма действительной с $this.valid(), потому что отправка формы вызовет это автоматически.

Затем в вашей функции submitHandler в конце добавьте:

$( "#add-dialog-container" ).dialog('close');

Это будет охватывать как случай "нажатия ввода", так и случай "нажатого сохранения".

Answer 2

Добавьте $ (this) .remove () внутри вашей функции закрытия

close: function() {
    $this.find(":input,:radio,:checkbox").removeClass( "ui-state-error" );
    $this.html(originalContent);
    $(this).remove();
}