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
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 :
/*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
Bonjour,
comment faire pour que l’affichage de la réponse se fasse sur la page et non dans un popup ?
merci
Jacques
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.