MajaxAdd XXX et majaxContain XXX

De Sydonie

La classe majaxAdd_XXX et l'id majaxContain_XXX

Ces classes servent à ajouter un fragment d'HTML lorsqu'un formulaire est validé. Dans le cas présent, nous utilisons ce mécanisme pour mettre à jour la liste des tags ajoutés par l'utilisateur.

L'exemple illustre l'interaction suivante :

  1. l'utilisateur envoie un formulaire contenant une liste de tags
  2. le système ajoute les tags à l'objet concerné et retourne un fragment de liste contenant les tags réellement ajouté
  3. majax va ajouter ce fragment dans un conteneur, ici "majaxContain_TagList".

Prenons le morceau de code suivant comme exemple :

 
 <div>
 
 <ul id="majaxContain_TagList">
 ...
 <li class="majax"> 
  <a class="noMajax" href=".../hasTag/?tag=MyTag"> MyTag </a>
  <a href=".../deleteTag?id=x32b"> x </a> 
 </li>
  ...
 </ul>
 
 <form class="majaxForm majaxAdd_TagList" action=".../addTags">
  <input name="theListOfTags" type="text"/>
  <input type="submit"/> 
 </form>
 
 </div>

Ici, le form possède la classe "majaxAdd_TagList" et la balise "ul" possède l'id "majaxContain_TagList". C'est grâce à la présence des deux suffixes communs aux mots clés "majaxAdd_" et "majaxContain_" que le système met à jour la liste lorsque le fomulaire est validé. Attention, pour les formulaires il faut ajouter la classe "majaxForm".

le système va envoyer le contenu du formulaire par une requête XML-HTTP. Le fragment HTML résultant de l'envoi du formulaire sera alors placé à la fin du conteneur ayant l'id "majaxContain_TagList".

Ici, le fragment recu aura la forme :

 
 <li class="majax"> 
  <a class="noMajax" href=".../hasTag/?tag=MyNewTag1"> MyNewTag1 </a>
  <a href=".../deleteTag?id=x33b"> x </a> 
 </li>
 <li class="majax"> 
  <a class="noMajax" href=".../hasTag/?tag=MyNewTag2"> MyNewTag2 </a>
  <a href=".../deleteTag?id=x34b"> x </a> 
 </li>

Notons que les tags majax, noMajax, etc. du fragment inséré de cette manière vont avoir le comportement [[Fichier:Fichier:Exemple.jpgFichier:Exemple.jpg]]