JQUERY & AJAX jouent aux TRIGGERS

On ne présente plus JQUERY et l’évènement AJAX qui, à eux deux, ont fait la web révolution. Les «triggers» ou déclencheurs, sont bien connus des DBA et très largement utilisés. Du coté web, ce mécanisme n’est pas systématiquement utilisé voire pas du tout. Pourtant, les triggers sont bien présents dans la librairie JQUERY.

Très bien me diriez vous, mais encore ?. En regardant la capture d’écran ci-dessous, qui montre le code d’un site de vente en ligne, vous remarquerez la répétition de l’appel «$.ajax». L’idée est donc de factoriser ces appels et d’utiliser les triggers pour faire exécuter les tâches adéquates lorsque la réponse est un succès ( $.ajax({success: function(){} }; ) ou un échec ( $.ajax({error: function(){} }; ).

Visualiser la DEMO et téléchargez les sources de cette dernière.

Uniformiser l’appel «$.ajax», permettra de réduire le code et la logique business sera déportée au sein des triggers.

Cette évolution du code permettra toujours par exemple de :
• Afficher un message de type «Growl» dans l’interface utilisateur,
• Mettre à jour un bloc de contenu,
• Bloquer une interface de pilotage et lancer un évènement de pooling,
• Et bien d’autres encore.

Implémentations du duo AJAX / TRIGGERS avec JQUERY

Les échanges de données (serveur / navigateur / fonctions JS) seront au format JSON. PHP sera utilisé coté script (contrôleur de dialogue) et nous verrons justement comment utiliser le mode AJAX sans pour autant perdre au niveau SEO (de nombreux billets traitent de ce sujet).

Affectation de l’évènement AJAX

A la fin du chargement de la page web, nous allons demander à JQUERY de parcourir un noeud à la recherche d’éléments pouvant accueillir l’évènement AJAX. Dans notre exemple, nous nous limiterons à la recherche des éléments de type A.

La fonction JS prend en argument le nom du noeud et l’élément à trouver dans le DOM. Lorsque l’on fera appel à cette fonction, le noeud sera parcouru à la recherche des éléments. Pour que l’évènement AJAX soit attaché à ces derniers, ils devront dans notre cas, posséder la «class» «ajax» et surtout ne pas avoir l’attribut «node_checked». Pour tous les éléments trouvés, où l’évènement «click» serait déclenché par un utilisateur ( $(this).unbind(‘click’).click(function() {} ); ), JQUERY fera appel à la fonction _ajax().

Fonction AJAX «$.ajax» de JQUERY

Ce qui est important de noter c’est l’appel «success». En effet, $.ajax va exécuter la fonction si tout s’est bien passé. Dans la réponse qui provient d’un contrôleur de dialogue (implémentation de type MVC), on a retourné un objet JSON, car justement c’est un appel AJAX. Dans cet objet JSON, nous avons pris soin de spécifier le nom du trigger qui devra être appelé.

Script PHP du test 1

Lorsque la fonction _ajax() a déclenché l’appel en POST, cette dernière a rajouté à l’url le paramètre «_v». Si ce paramètre existe et a pour valeur «ajax», alors le script PHP va retourner un objet JSON. Dans le cas contraire, on affiche la page complète.

Les triggers

Les triggers ne sont finalement qu’une suite de workflow auxquels on a passé en paramètre, un objet JSON.
Visualiser la DEMO et téléchargez les sources de cette dernière.