AJAXコールの後にフォーム提出を続けるには？

Question

送信ボタンを押したときにWordPressの投稿のユーザーの入力を検証し、エラーメッセージを表示して問題があり、すべてがOKならフォームを送信します。 form_dataのデータがOKならば、trueを返して、それ以外の場合はエラーコードを返すチェックを行うPHP関数があります。次のJavaScriptは、AJAXリクエストを発行し、成功したチェック時にフォームを送信し続けることになっていたが、それはしていません：

 jQuery(document).ready(function() { 
      jQuery('#post').submit(function() { 

       var form_data = jQuery('#post').serializeArray(); 
       var data = { 
        action: 'ep_pre_submit_validation', 
        security: '<?php echo wp_create_nonce('pre_publish_validation'); ?>', 
        form_data: jQuery.param(form_data), 
       }; 
       var proceed = false; 
       jQuery.post(ajaxurl, data, function(response) { 
        if (response.indexOf('true') > -1 || response == true) { 
         proceed = true; 
        } else { 
         alert("Error: " + response); 
         proceed = false; 
        } 
       }); 
       jQuery('#ajax-loading').hide(); 
       jQuery('#publish').removeClass('button-primary-disabled'); 
       return proceed; //breakpoint here makes the code run 
      }); 
     }); 

コードはもともととして私のために動作しませんでしたWPSE question、から構成されていますフォームは提出されませんでした。私は、.submit()にバインドされたjQuery関数がtrueを返す場合、フォームを送信する必要があることを知ったので、実装しようとしました。上記のコードでは、最初は機能していないようです（エラーがない場合はフォームは送信されません）。しかし、Firebugを使って詳細に検査すると、return proceed行にブレークポイントが挿入されていると正しい結果が得られるようです。これは、有効なデータで意図したとおりに動作しますが、ブレークポイントに達すると少し待ってから実行を続けるとになります。エラーが発生した場合、アラートは問題なく発行されます。

これを処理する最善の方法は何ですか？

@Linusに基づいて

EDITは以下の答え、次のコードは、有効および無効なデータの両方で動作します：

 jQuery(document).ready(function() { 
      jQuery('#post').submit(function() { 
       if(jQuery(this).data("valid")) { 
        return true; 
       } 

       var form_data = jQuery('#post').serializeArray(); 
       var data = { 
        action: 'ep_pre_submit_validation', 
        security: '<?php echo wp_create_nonce('pre_publish_validation'); ?>', 
        form_data: jQuery.param(form_data), 
       }; 
       jQuery.post(ajaxurl, data, function(response) { 
        if (response.indexOf('true') > -1 || response == true) { 
         jQuery("#post").data("valid", true).submit(); 
        } else { 
         alert("Error: " + response); 
         jQuery("#post").data("valid", false); 

        } 
        //hide loading icon, return Publish button to normal 
        jQuery('#ajax-loading').hide(); 
        jQuery('#publish').removeClass('button-primary-disabled'); 
       }); 
       return false; 
      }); 
     }); 

Answer 1

短い答え：このようにはできません。

背景：$.postなどの関数の引数として指定したコールバックは、非同期に実行されます。つまり、return proceedの前に成功コールバックが実行され、proceedは常にfalseになります。あなたのブレークポイントでは、成功コールバックが実行されるまで待っていれば、proceedはtrueとなり、すべてがうまくいくでしょう。

あなたのajaxリクエストが完了した後にフォームを送信する場合は、はでなければなりません。これはjQueryで非常に簡単です。ちょうどjQuery $.postをdata: $("yourForm").serialize()とurl: yourForm.actionとするだけです。

これは基本的にあなたが既にやっていることですが、実際にデータを投稿したいURLにその呼び出しを繰り返すだけです。

EDIT：

もう一つの方法は、validを言うと、あなたのsubmitハンドラ内でこれを確認し、フォーム上の属性を設定することです：

jQuery("#post").submit(function() { 
    if($(this).data("valid")) { 
     return true; 
    } 
    // Rest of your code 
}); 

をそして、あなたの検証のための成功コールバックでajaxリクエストでその属性を設定/クリアしてから送信してください：

$("#post").data("valid", true).submit(); 

EDIT：

また、上記で述べたのと同じ理由のために$.postのコールバック内で有効にあなたの「AJAXロード」/ボタンをしたい - それがあるとして、彼らはあなたのAJAX呼び出しが戻る前に、すぐに発生します。

Answer 2

をご確認機能へのボタンの代わりに提出するBIND。検証に合格した場合は、submit（）を呼び出します。

Answer 3

本当の質問は、なぜ検証サーバー側でですか？投稿が書かれている前に、なぜあなたは検証基準で読み込めませんか？その後、あなたの検証はリアルタイムで実行され、実行時には実行されません。

jquery.postは非同期に実行されます。つまり、JSは応答を受け取る前に処理を続行します。あなたはDiodeusの答えに固執しています - フォームを提出するフォームにボタンをバインドします（これはフォームの品質を低下させません）、または$ postをajaxに変更して非同期をオフにして、 ...タイムアウトするまであなたのページにJSをロックする可能性があります。

$.ajax({ 
    type: 'POST', 
    url: ajaxurl, 
    async:false, 
    data: data, 
    timeout:3000, 
    success: function(){ 

    } 
}); 

Answer 4

Wordpressのは、WP-adminの/ WP-ajax.phpを使用して、Ajaxリクエストを処理するための独自のメカニズムを持っています。これにより、Ajax境界の両側で任意のコードを実行できるようになり、前後の状態チェックコードとそのすべてを書く必要がなくなります。コールバックを設定して...