0

フォーム付きのjqueryダイアログがあります。ユーザーが送信ボタンをクリックすると正常に機能します。検証し、データベースに新しいレコードを入力し、親ウィンドウのテーブルを閉じて更新します。ダイアログが閉じないことを除いて、Enterキーを押してもすべて同じように機能します。私は誰かが私のエラーを指摘できることを望んでいます。検証プラグインと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();
    });
});
4

2 に答える 2

2

フォームでEnterキーを押すと、フォームが送信されます。したがって、submitHandler$。validateがトリガーされます。送信が成功した後にダイアログを閉じるように、呼び出しを再配置することができます。[保存]ボタンハンドラーで、次の操作を行います。

$this.submit();

$this.valid()フォームを送信すると自動的にトリガーされるため、フォームがで有効かどうかを手動で確認する必要はありません。

次に、submitHandler関数で、最後に次を追加します。

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

これは、「ヒット入力」の場合と「クリックされた保存」の場合の両方をカバーします。

于 2012-02-20T16:35:29.857 に答える
0

close関数内に$（this）.remove（）を追加します

close: function() {
    $this.find(":input,:radio,:checkbox").removeClass( "ui-state-error" );
    $this.html(originalContent);
    $(this).remove();
}
于 2012-02-20T02:09:43.977 に答える