WordPress : Utilisation de l’ajax dans WordPress

Voici un post d’exemple sur l’utilisation de l’ajax dans WordPress. Nous allons voir à travers la création d’un mini plugin, comment lancer une requête ajax utilisant le système conçu pour ça dans wordpress.

Le plugin sera utilisable en plaçant le shortcode

[submit-input-ajax]

dans une page. La démonstration est ici

On avait déjà vu comment créer un plugin permettant l’utilisation d’un shortcode. Pour ajouter de l’ajax il faudra ajouter certains éléments « wp_ajax_ ». Le code fonctionnel du plugin est présenté ci-dessous :

/*
  Plugin Name: Plugin action ajax
  Description: Demonstration d'un plugin effectuant une action ajax
 */


class PluginActionAjax {

    public function __construct() {
        //shortcode permettant d'afficher le formulaire avec le champs input et le bouton de soumission
        add_shortcode('submit-input-ajax', array($this, 'shortcode_submit_input_ajax'));
        //chargement des scripts à inclures (css, js...)
        add_action('wp_enqueue_scripts', array($this, 'action_ajax_scripts'));
        //appel ajax de notre fonction "process_action_ajax" si l'utilisateur est loggé "wp_ajax_" ou si il ne l'est pas "wp_ajax_nopriv_"
        add_action('wp_ajax_process_action', array($this, 'process_action_ajax'));
        add_action('wp_ajax_nopriv_process_action', array($this, 'process_action_ajax'));
    }

    /**
     * génère le formulaire lorsqu'on utilise le plugin [submit-input-ajax]
     */

    public function shortcode_submit_input_ajax($atts) {
        $html = '<form class="submit-input-ajax-container">';
        $html .= '<div><label for="submit-input-ajax">Veuillez entrez une information et valider en cliquant sur le bouton</label></div>';
        $html .= '<input type="text" id="submit-input-ajax" />';
        $html .= '<button type="submit" id="btn-submit-input-ajax" >Valider</button>';
        $html .= '</form>';
        return $html;
    }

    /**
     * traite l'appel ajax
     */

    public function process_action_ajax() {
        //verifie l'existence non vide de l'input
        if (isset($_POST['input']) && $_POST['input'] != '') {
            //n'importe quel traitement
            $message = 'Voici votre message en sha1 : ';
            $message .= sha1($_POST['input']);
            //retour success
            wp_send_json_success(['message' => $message]);
        }
        //retour erreur
        wp_send_json_error(['message' => 'Impossible !']);
    }

    /**
     * Appel des fichiers js/css nécessaires au fonctionnement
     */

    public function action_ajax_scripts() {
        global $post;
        //si notre shortcode est présent dans le post courant.
        if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'submit-input-ajax')) {
            wp_enqueue_style('paa-style', plugin_dir_url(__FILE__) . '/styles.css');
            //ajout du script lancant la requete ajax
            wp_enqueue_script('paa-ajax', plugin_dir_url(__FILE__) . '/script.js', array('jquery'));
            //on informe le script précédent de l'adresse "adminAjax" de wordpress
            wp_localize_script('paa-ajax', 'adminAjax', admin_url('admin-ajax.php'));
        }
    }

}
new PluginActionAjax();

Il ne reste plus qu’a créer le fichier script.js qui lancera l’appel de « process_action » lors de la soumission du formulaire généré par le shortcode. Il contient le code suivant :

jQuery(document).ready(function () {
    /*lors de la soumission du formulaire, on vérifie que le champ est replie et on appelle notre action ajax*/
    jQuery(document).on("submit", ".submit-input-ajax-container", function (e) {
        e.preventDefault();
        var input = jQuery("#submit-input-ajax").val();
        if (input == "") {
            alert("Vous devez completer le champ ! ");
        } else {
            jQuery.ajax({
                //apel de l'url ajax wordpress
                url: adminAjax,
                method: 'POST',
                data: {
                    //nom de notre action déclaré dans le plugin "wp_ajax_..."
                    action: 'process_action',
                    input: input
                },
                success: function (data) {
                    alert(data.data.message);
                },
                error: function (data) {
                    //erreur
                }
            });
        }
    });
});

Pour des explication détaillées, vous pouvez vous rendre sur cette page

2 réflexions sur « WordPress : Utilisation de l’ajax dans WordPress »

    1. Ruben G

      Dans la partie jQuery tu peux remplacer :
      success: function (data) {
      alert(data.data.message);
      },
      Par :
      success: function (data) {
      $(« .submit-input-ajax-container »).append(«  »+data.data.message+ » »);
      },
      Il existe des milliers de variantes de ce genre en fonction de tes besoins.

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.