web-dev-qa-db-ja.com

トリガーできません AJAX ダッシュボードの送信ボタンで機能する

私はWordPressのプラグインを書いています。私のプラグインには、WordPressダッシュボード内の私のプラグインによって生成された他のページにデータを投稿するフォームがあります。フォームが送信されたときにトリガーされるAJAX関数を作成しようとしています。私のAJAXは問題なく動作しています - テストするために、プラグインヘッダーをクリックしたときにイベントが発生し、そこで問題なく動作しています。ただし、送信ボタンをクリックしたときにイベントを発生させようとすると(any input type = "submit")、機能しません。 JavaScriptはうまく動きますが、PHP関数が見つかりません。

これが私のJavaScriptです。

$('.button').on('click', function (e) {
    var url = testingajax.ajaxurl;

    var data = {
        'action': 'testing_ajax_wtf',
    }

    $.post(url, data, function (response) {
        console.log(response);
    });
});

PHP関数は単に文字列を返します(テスト目的)。

最初の行を次のように変更すれば、これで問題なく動作します。

$('.my-plugin-header').on('click', function (e) {

しかし、送信ボタンがクリックされたとき、またはフォームが送信されたときにトリガしようとすると、JavaScriptは実行されますが、PHP関数が見つかりません。

ここで何が起こっているのでしょうか。ダッシュボードでフォームを送信したときにWordPressがどういうわけかAJAXを実行するのを妨げますか?

1
Morgan Kay

ボタンからtype="submit"を削除して、最初にjQueryのAjax呼び出しを起動させてください。あなたが応答を得たら、それからあなたもあなたのフォームを提出することができます。このようなもの;

function your_action_javascript() { 
?>
<script type="text/javascript" >
    jQuery(document).ready(function($) {

       $('.button').on('click', function () {

            var data = {
                'action': 'your_action'
            };

            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            $.post(ajaxurl, data, function(response) {

                // getting response from your ajax callback function
                alert('Got this from the server: ' + response);

                // submitting form after getting response
                $('#your_form_id').submit();
            });

        });

    });
</script> 
<?php
}
// Hook this function to admin footer
add_action( 'admin_footer', 'your_action_javascript' ); 
0