web-dev-qa-db-ja.com

ポストメタボックス内のAjaxフォーム送信

私はpostに割り当てられたカスタムのワードプレスMetaBoxを持っています。

関数saveをsave_actionで実行しています。

しかし、メタボックスの内側にボタンを表示して、ページを更新しなくてもクリックで機能が実行されるのではないかと思いました。

phpajaxforms
1
samjco

はい、できます。ここにあなたが始めるためのサンプルコードとフォローアップするためのリンクがあります。

フォームにボタンとナンスフィールドを追加する

<input type="hidden" name="my_ajax_nonce" value="<?php echo wp_create_nonce('my_ajax_action');?>" />
<button id="submit-my-form" type="submit"><?php _e('Save custom meta data')?></button>

AJAX呼び出しで、実行したい関数を作成して登録する必要があります。

function my_ajax_action() {
    if(!wp_verify_nonce( $_POST['my_ajax_nonce'], 'my_ajax_action' )) {
        die(-1);
    }
    //TODO: Add your button saving stuff here.
    var_dump($_POST['form_data']);
    exit;
}

function my_ajax_action_init() {
    if ($_POST['action'] == 'my_ajax_action') {
        do_action('wp_ajax_my_ajax_action');
    }
}

if (is_admin()){
    add_action('wp_ajax_my_ajax_action', 'my_ajax_action');
}

add_action( 'init', 'my_ajax_action_init');

NOTEinitでAJAXアクションを呼び出すのではなく、プラグインがロードされたときではないのはなぜですか？ AJAXマジックを行う前にWordPressを正しく設定する必要があるためです。

今度はあなたのJSのものをmy.ajax.action.jsと呼ばれる特別なファイルに追加してください

jQuery(document).ready(function($) {
    $('body').on('click', '#submit-my-form', function(e) {
        e.preventDefault();
        var $me = $(this),
            action = 'my_ajax_action';
        var data = $.extend(true, $me.data(), {
            action: action,
            form_data: $('#post').serializeArray()
        });
        $.post(ajaxurl, data, function(response) {
            if(response == '0' || response == '-1'){
                //TODO: Add Error handling (Wrong nonce, no permissions, …) here.
            } else {
                //TODO: Do stuff with your response (manipulate DOM, alert user, …)
            }
        });
    });
});

スクリプトをエンキューすることを忘れないでください。

function my_enqueue_scripts() {
    wp_enqueue_script( 'my-ajax-action', plugins_url('my.ajax.action.js', __FILE__), array('jquery'), NULL, true);
}
add_action( 'admin_enqueue_scripts', 'my_enqueue_scripts');

NOTEグローバルなJS var adminurlは自動的にWPバックエンドに含まれます。

参考文献

4
iantsch