JQueryフォームプラグイン - フォームを送信する前にユーザー確認のプロンプトを表示しますか？

Question

我々は、我々のフォームをSUMITするjQueryのフォームpluginを使用します。

var options = { 
      dataType: 'json', 
      beforeSubmit: createposPreSubmit, 
      success:  createposPostSubmit, 
      error: function(xhr) { handleError(xhr, 'Error in Create Pos grid form submission'); } 
    }; 

    $('#form-createpos').ajaxForm(options); 

私たちは前に提出されたフォームにjQueryのUIのdialogメソッドを使用して続行/キャンセル確認プロンプトをdispalyたいです。

問題はdialogが非同期であるので、我々はユーザーの応答を待つことができません。私たちはfalseをbeforeSubmitから返します。しかし、私は、ユーザーが継続することを選択した場合に提出するフォームをトリガーする方法を見つけ出すことはできません。

これらは、私たちのモーダルダイアログ内のボタンです：Continueボタン機能jqForm.submitとjqForm[0]ドン」は、

function createposPreSubmit(formData, jqForm, options) { 

... 

var buttons = { 
    "Continue": function() { 
     $(this).dialog("close"); 
     //HOW CAN WE SUBMIT FORM?? 
     disableSubmit($("#submit-createpos")); 
    }, 
    "Cancel": function() { 
     $(this).dialog("close"); 
    } 
}; 

//Show dialog 

//Always return false 
return false; 
} 

適切に動作するようです。 jqForm[0]はフォームを送信するようですが、ブラウザは "奇妙な"方法で動作します。

??

Answer 1

私は、このアプローチを使用して終了：

$('#form-createpos').submit(function() { 
    var options = { 
     success: myfunc //WE DON'T NEED A PRESUBMIT HANDLER 
    }; 

    var buttons = { 
     "Continue": function() { 
      $(this).dialog("close"); 
      theForm.ajaxSubmit(options); //MANUALLY SUBMIT FORM 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    }; 

    //Show JQuery dialog 
}); 

Answer 2

私が正しく理解していれば、あなたはフォームの事前提出」したい、彼らが受け入れたときに、うまくいけば、これ以上の作業が行われる必要がない、あるいは最悪で、彼らは単に現在の要求まで待機する必要があるだろうように、終了する。

私はあなたがそれは本当、彼らは「提出」一度最初はnull、フラグ、グローバル変数を使用することをお勧めします。 'pre-submit'からコールバックを受け取ったら、グローバル変数の状態をチェックします。それが真実なら、提出してください。それが偽であれば何もしないでください。 nullの場合は、ダイアログを閉じる前にコールバックが終了したことを意味します。つまり、最初にnullの2番目のグローバル変数が必要です。この場合、trueに設定すると、 'Continue 'ボタンを押すと、待つのではなく、すぐに進むことがわかります。

私はあなたのコードは次のようなものを見て期待：

var ajaxPreSubmitOk = null; 
var dialogSubmitOk = null; 
var buttons = { 
    "Continue": function() { 
     $(this).dialog("close"); 
     dialogSubmitOk = true; 
     if(ajaxPreSubmitOk !== null && ajaxPreSubmitOk) { 
      // Presubmit returned and everything is ok.. proceed! 
      callSubmit(); 
     } else if (ajaxPreSubmitOk === null) { 
      // Gotta wait still 
      disableSubmit($("#submit-createpos")); 
     } 
    }, 
    "Cancel": function() { 
     // Regardless of presubmit outcome, do nothing 
     dialogSubmitOk = false; 
     $(this).dialog("close"); 
    } 
}; 

function ajaxFormCallback() { 
    // If callback success 
    if(true) { 
     ajaxPreSubmitOk = true; 
     if(dialogSubmitOk !== null && dialogSubmitOk) { 
      // User already clicked continue. We're good! 
      callSubmit(); 
     } 
    // else callback fail 
    } else { 
     // Regardless of outcome, do nothing 
     ajaxPreSubmitOk = false; 
    } 
} 

function callSubmit() { 
    enableSubmit($("#submit-createpos")); 
    ajaxPreSubmitOk = null; 
    dialogSubmitOk = null; 

    // What do do when everything goes as planned 
}