Server-Sent Events #2

Pour bien comprendre cet article, il faut d’abord lire : AJAX in Plugins sur le site WordPress.

Il y a aussi ce tutoriel : https://www.sitepoint.com/how-to-use-ajax-in-wordpress-a-real-world-example/

Dans l’ordre, voici ce qui se passe dans l’exemple décrit précédemment Server-Sent Events #1 :

création d’un shortcode

add_shortcode("short_code_jbs1_ajax_frontend", "jbs1_ajax_frontend");

définition du shortcode

Le shortcode ci-dessus, affiche un formulaire dans lequel on a un « name », une « action » et un bouton submit.

Le name est un input.
L’action aussi mais de type hidden avec pour valeur jbs1_ajax_hook
Le submit_button pointe vers le script jbs1_me
 

function jbs1_ajax_frontend(){
	echo '
         <form id="theForm">
            <input id="name" name="name" value = "name" type="text" />
            <input name="action" type="hidden" value="jbs1_ajax_hook" />&nbsp; <!– this puts the action jbs1_ajax_hook into the serialized form –>
            <input id="submit_button" value = "Click This" type="button" onClick="jbs1_me();" />
        </form>
 		
 		<div id="response_area">
        	La réponse sera ici :
        </div>
 	' ; 
 }

script

Le script appelle la page PHP Ajax admin-ajax.php qui active le hook jbs1_ajax_hook (dont le nom est passé en paramètre fans le form)

Hook PHP

Le hook PHP Ajax est la fonction ci-dessous :


function jbs1_action_function(){
// this area is very simple but being serverside it affords the possibility of retreiving data from the server and passing it back 
// to the javascript function

	$name = $_POST['name'];
	$prenom = $_POST['prenom'];
        echo $name . "  ". $prenom ;
    	
	die(); // wordpress may print out a spurious zero without this – can be particularly bad if using json
}

Elle retourne en echo les données au script JS.

script

Le script JS exécute son callback, à savoir le remplacement dans le form du div response_area par le contenu transmis par echo

Après avoir expliqué le tutoriel précédent, je vais le modifier pour en faire un SSE.