Un peu d'Ajax dans Trivialibre

Dans Trivialibre, l'édition des questions en cours de modération était un peu pénible, puisqu'à partir de la liste des questions, il fallait systématiquement charger une page séparée pour chaque question à éditer. Ça faisait quelques temps que je voulais expérimenter un peu le nouveau buzzwords du Web 2.0 qu'est l'Ajax. Je me suis donc lancé avec le framework Prototype, qui simplifie l'écriture de requêtes Ajax et la manipulation de l'arbre DOM d'une page HTML à partir de Javascript. J'ai également beaucoup utilisé l'extension Firebug pour Firefox, qui s'est révélée très précieuse, si ce n'est indispensable, pour débugger les requêtes Ajax et les modifications de l'arbre DOM.

Le résultat final est visible sur la page listant les questions en attente de modération, mais seulement pour les personnes qui ont un compte et qui sont connectées. En gros, à coté de chaque ligne contenant une question, une petite icône "Éditer" est présente. Lorsque l'on clique dessus, la ligne de la question est remplacée par une ligne contenant un formulaire permettant de modifier l'intitulé de la question, la réponse, ainsi que la catégorie de la question (et ce sans aucune communication avec le serveur). Une fois qu'on a modifié la question, la réponse, ou la catégorie, une requête AJAX est envoyée au serveur. Pendant son traitement, la chaîne "Sauvegarde en cours..." est affichée, puis lors de la réception de la réponse du serveur, la ligne du tableau revient à ce qu'elle était à l'origine avec évidemment les modifications apportées par l'utilisateur.

Lorsque la question ou la réponse sont modifiées, c'est plutôt facile. Mais lorsque la catégorie est modifiée, c'est plus délicat, parce que la page est constitué de 6 tableaux distincts, chacun pour une catégorie. Lors d'un changement de catégorie, il faut donc retirer la ligne du tableau où elle était pour l'ajouter dans le tableau du destination source. Et les lignes de chaque tableau étant d'une couleur alternée (blanc, bleu, blanc, bleu), il faut également recalculer la couleur pour toutes les lignes du tableau source suivant la lignée déplacée, et calculer la couleur de la ligne déplacée en fonction de l'entrée qui la précède dans le tableau destination. Bref, un peu de bricolage amusant, qui s'est révélé finalement assez simple à réaliser en Javascript avec l'aide de Prototype.

Rigolo l'Ajax :-)