Développer avec et sans Ajax : Compatibilité NOJS avec admin-post.php
Ajax, sujet toujours discuté à droite à gauche, ici même encore la semaine dernière avec un article sur la navigation ajax made in wabeo par notre ami Willy.
à mon tour de vous parler d’Ajax, plus précisément de la façon d’utiliser Ajax dans WordPress afin de rendre vos développements compatible NOJS, ou si vous préférez « Sans JavaScript« .
Dans le même temps je vais devoir vous parler d’un fichier un peu plus méconnu que le admin-ajax.php
, il s’agit de admin-post.php
, son jumeau synchrone.
JavaScript Head
Vous avez développé un plugin, avec une belle interface, des actions bien stylées, les pages n’ont même pas besoin de se recharger. Que ce soit en back-end ou en front-end, l’administrateur et l’utilisateur final gagnent en confort de navigation. Félicitations.
Vous désactivez le JavaScript afin de tester le site, puisqu’avant le développement de ce plugin, le site était bel et bien fonctionnel. Même chose pour le back-end, WordPress a géré pour toutes les pages, toutes les options, tous les cas que tout fonctionne même sans le JavaScript. Vous rafraà®chissez et …
Peinard dans votre fauteuil, vous regardez flambez le site, plus rien ne fonctionne, vous qui aviez déjà le champagne à la main, en train de vous auto-congratuler de votre chef-d’oeuvre JavaScripto-contemporaino-2013, c’est raté.
HEY ! Pourquoi désactiver JavaScript ? Qui navigue sans JavaScript ? Quel pourcentage de personnes cela représente ? Je vous laisse lire l’article chez AlsaCreations qui s’est demandé Pourquoi certains naviguent sans JavaScript.
Convaincus ? J’espère !
JavaScript Heat
En fait, la vraie bonne solution n’est pas de développer en pensant JavaScript en premier lieu, même si c’est le besoin recherché, il ne faut donc pas le faire basé sur admin-ajax.php
avec un envoi de donnée arbitraire comme « id=123,action=like » etc.
Vous devez faire en sorte que le développement fonctionne sans JavaScript, basé sur admin-post.php
, puis ensuite, nous pourrons ajouter la couche Ajax, ce qui ne prendra certainement pas le double de temps.
JavaScript Junkie
Exit admin-ajax.php
, hello admin-post.php
. Ces 2 fichiers fonctionnent quasiment de la même façon à la différence que Ajax sera asynchrone comme son nom l’indique, et Post sera synchrone, un rechargement de la page sera nécessaire, c’est le but : ne pas gérer de suite le JavaScript.
Nous allons voir le plus simplement possible comment faire. Prenons l’exemple d’un lien à cliquer qui serait sous la forme :
Puis vous avez certainement un code JavaScript du genre :
Et côté PHP vous avez (j’espère) utilisé les hooks wp_ajax_nopriv_like
et wp_ajax_like
pour gérer ce like.
Code PHP du like très simplifié :
Hot JavaScript
« à‡a devient chaud ! » Mais nooon … il faut d’abord penser à le faire de suite sans JS, voici comment procéder :
Plus besoin du data-ID
. Et côté PHP j’utilise maintenant en plus les hooks admin_post_nopriv_like
et admin_post_like
.
Je modifie un peu la fonction de callback en prime :
Et mon JavaScript se simplifie :
Je prends l’url du lien et remplace le nom du fichier post par celui de l’Ajax ! Plus besoin des data.
Franchement, c’est plus difficile là ? Plus long à coder ? Non. Si je clic sur le lien sans JavaScript je vais déclencher l’action de admin-post.php
, mettre à jour un compteur de like, et être redirigé sur ma page.
Si le JavaScript est possible, le preventDefault empêchera alors le clic et lancera à la place la requête Ajax sur admin-ajax.php
. Libre à vous d’ajouter un loader/spinner pour indiquer qu’une requête est en cours, si vous souhaitez mettre à jour le compteur en live, je vous laisse faire un wp_send_json() avec la valeur à retourner, valeur que vous remplacerez, ça, c’est aussi un autre sujet, je vous laisse faire 😀
Epic JavaScript
Vous venez de faire du développement Ajax compatible NOJS en 3 lignes de code de plus et en modifiant un lien href.
Cette solution fonctionne aussi avec les formulaires qui seraient sérialisés puis envoyés en Ajax, si vous l’utilisez dans le back-end, n’oubliez pas d’ajouter un nonce !
Aussi elle est simple à mettre en place et respecte les bonnes pratiques en termes d’accessibilité, en auriez-vous déjà eu besoin ?
Vous aimez ? Partagez !
Partager la publication « Développer avec et sans Ajax : Compatibilité NOJS avec admin-post.php »
Réagir à cet article