Lancer des actions AJAX avec EO Framework

Nous retrouvons dans EOFramework trois types d’actions permettant de lancer des requêtes AJAX.

• Les actions en attributs: action-attribute
• Les actions des formulaires: action-input
• Les actions « suppression »: action-delete

Ses trois actions s’utilisent grâce à l’ajout d’une classe sur un élément du DOM.

Peu importe la classe utilisé dans notre élément (action-attribute, action-input ou action-delete), celle-ci se trouvera toujours accompagnée de deux attributs supplémentaires:

• data-action est l’attribut déclarant le nom de l’action pour le hook ‘wp_ajax (action )’ de WordPress.
• data-nonce est l’attribut déclarant le nonce pour sécurisé l’action.

Action Attribute

Nous allons créer un span permettant de créer un post WordPress :

<span class="action-attribute">Créer mon post</span>

Comme dit plus haut, nous allons rajouté les deux attributs supplémentaire: data-action et data-nonce.

<span class="action-attribute" 
	data-action="create_my_post"
	data-nonce="<?php echo esc_attr( wp_create_nonce( 'create_my_post' ) ); ?>">Créer mon post</span>

A partir de là, nous avons déjà une requête AJAX de type POST contenant les données suivantes :

• action égale à create_my_post
• nonce égale à un token correspondant à l’action create_my_post.

Utilisons WordPress pour traiter notre action AJAX en PHP:

<?php

add_action( 'wp_ajax_create_my_post', 'create_my_post' );

function create_my_post() {
	// Vérification du nonce
	check_ajax_referer( 'create_my_post' );

	// Création d'un post
	wp_insert_post( array(
		'post_title' => 'Mon super article',
	) );

	// Renvoies success à la réponse AJAX.
	wp_send_json_success();
}

Ligne 7: Nous avons défini un nonce dans l’attribut data-nonce, nous l’utilisons pour vérifier que la requête XHR contient bien un token.

Donner un titre personnalisé à l’article

Ajoutons l’attribut data-title dans le span:

<span class="action-attribute" 
	data-action="create_my_post"
	data-nonce="<?php echo esc_attr( wp_create_nonce( 'create_my_post' ) ); ?>"
	data-title="Mon super article avec Action Attribute">Créer mon post</span>

Modifions maintenant notre function create_my_post pour utiliser notre nouvelle donnée data-title, vu que la requête AJAX envoyé par action-attribute est de type POST, nous allons retrouver notre valeur dans $_POST[‘title’].

Voici le nouveau code de la function create_my_post.

function create_my_post() {
	// Vérification du nonce
	check_ajax_referer( 'create_my_post' );

	// Pour la sécurité, nous appliquons sanitize_text_field sur $_POST['title'] pour filtrer la donnée reçu par le formulaire.
	$title = ! empty( $_POST['title'] ) ? sanitize_text_field( $_POST['title'] ) : '';

	// Si le titre est vide, nous stoppons la requête XHR.
	if ( empty( $title ) ) {
		wp_send_json_error();
	}

	// Création d'un post en utilisant $title.
	wp_insert_post( array(
		'post_title' => $title,
	) );

	// Renvoies success à la réponse AJAX.
	wp_send_json_success();
}

Action Input

Nous allons créer un bouton ainsi qu’un formulaire. Ensuite affectons la classe action-input à ce bouton avec son data-parent qui est un attribut obligatoire pour le fonctionnement de Action Input.

<form class="my-form">
	<input type="hidden" name="action" value="save_product" />
	<input type="text" name="title" />
	<input type="text" name="price_ttc" />
	<select name="color">
		<option value="red">Rouge</option>
		<option value="blue">Bleu</option>
		<option value="green">Green</option>
	</select>

	<input class="action-input" data-parent="my-form" type="submit" />
</form>

Ligne 1: La classe « my-form » sur la balise form est très importante pour la balise à la ligne 11

Ligne 11: La classe « action-input » permet de déclencher la requête AJAX lors du clic sur le bouton. L’attribut data-parent est attaché à « my-form », celà permet d’englober votre formulaire. Tous les inputs, select, textarea qui contiennent l’attribut « name » sera envoyé à la requête.

Action Delete