MajaxListenTo XxX and MajaxFire XxX

De Sydonie

L'objectif de ces classes CSS est de remettre à jour plusieurs fragments d'une page web suite, par exemple, à l'envoi d'un formulaire.

Le cas d'utilisation est un exemple de ce que permet de faire cette fonctionnalité :

  1. Vous souhaitez proposer un formulaire pour éditer le titre d'un article.
  2. Le titre de l'article est écrit en haut de la page et dans un onglet (hors du formulaire).
  3. Vous souhaitez que l'envoi du formulaire ne recharge pas la page entière.

Lorsque le titre a été modifié par via le formulaire le problème est de remettre à jour le titre en haut de la page et dans l'onglet. C'est ce que permettent de faire simplement majaxListenTo_* et majaxFire_* .

L'idée originale est :

  1. envoyer un message lorsque le formulaire a fini d'être traité par le serveur.
  2. ce message sera reçu par toutes les parties de la pages qui l'écoute
  3. chaque partie de page qui a reçu le message se rechargera

Le tout, sans écrire de javascript.

Votre formulaire de modification aura la forme suivante :

<form class="majaxForm majaxFire_titleModified">
 <input ...>
 <input type="submit"/>
</form>

Notez dans ce formulaire :

  • la classe """majaxForm""" qui signifie que le formulaire sera envoyé en ajax.
  • la classe """majaxFire_titleModified""" qui permettra de lancer le message "titleModified" a toutes les parties de page concernées lorsque le formulaire aura été traité par le serveur.

le titre en haut de la page aura la forme suivante :

...
<span class="majaxListenTo_titleModified" data-url="http://..../fragment/title">
  <h1>le titre</h1>
</span>
...

L'url "http://..../fragment/title" retourne un morceau de Json, de la forme :

{"result":"success",
 "content":"
<span class='majaxListenTo_titleModified' data-url='http://..../fragment/title'>
  <h1>le nouveau titre</h1>
</span>
"}


Note :

Les évenement majaxFire, peuvent se placer sur les lien de type majaxLink. Ils seront alors déclenchés après que l'url du lien ait été appelé et ait retourné avec succès.

<a href="..." class="majaxLink majaxFire_titleModified">
...
</a>