web-dev-qa-db-fra.com

Formulaire Ajax à envoyer dans un Post Metabox

J'ai une wordpress personnalisée MetaBox assignée à poster.

J'ai la fonction en cours d'exécution sur le post save_action.

Cependant, je me demandais si je pouvais obtenir un bouton à l'intérieur de la métabox qui exécuterait la fonction au clic sans rafraîchir la page.

phpajaxforms
1
samjco

Oui, vous pouvez. Voici un exemple de code pour vous aider à démarrer et quelques liens à suivre.

Ajouter un bouton et un champ nonce à votre formulaire

<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>

Vous devez créer et enregistrer la fonction que vous souhaitez exécuter avec votre appel 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');

NOTEPourquoi appeler l'action AJAX sur init et non quand le plugin est chargé? Parce que nous avons besoin de WordPress pour être configuré correctement avant de faire notre magie AJAX.

Maintenant, ajoutez votre contenu JS dans un fichier supplémentaire appelé 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, …)
            }
        });
    });
});

N'oubliez pas de mettre votre script en file d'attente.

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');

NOTEL'administrateur JS var global est automatiquement inclus dans le backend WP.

Lectures complémentaires

4
iantsch