De l’Ajax dans une extension TYPO3

Publié le Mis à jour le

L’Ajax est très utilisé de nos jours… enfin, cette utilisation est plus ou moins réussie en fonction des projets. Trop d’Ajax tue parfois l’Ajax. Bref, avec TYPO3, il existe plusieurs solutions. Je vais néanmoins vous en présenter une : il s’agit de xajax. L’avantage de la bibliothèque xajax par rapport à ses concurrentes (prototype ou JSQuery par exemple), c’est qu’elle est très simple d’utilisation et ne nécessite donc pas de connaissances particulières.

Son utilisation dans un plugin frontend est relativement aisée, pourvu que l’on ne recharge pas la page 🙂

1. Tout d’abord, vous devez passer par le quickstarter dans TYPO3 pour créer un début d’extension. Ensuite, vous devez déclarer votre plugin comme étant de type USER_INT. Si vous déposez ce plugin sur une page, seul celui-ci ne sera pas mis en cache.

Vous pouvez déclarer votre plugin comme ceci :
plugin.tx_monplugin_pi1 = USER_INT

2. Ensuite, vous devez inclure la classe xajax dans votre pi1 :

/* Include xaJax */       
require_once (t3lib_extMgm::extPath(‘xajax’) . ‘class.tx_xajax.php’);

L’initialisation de l’objet xajax se poursuit. N’oubliez pas de déclarer la variable xajax dans votre classe !

Dans class tx_monplugin_pi1 extends tslib_pibase {

/* xajax */
var $xajax;

3. Vous pouvez créer ensuite une fonction d’initialisation que vous appelerez dans votre méthode main()

function initList() {

        //$this->conf = $conf;
       
        // Instanciation de l’objet ajax
        $this->xajax = t3lib_div::makeInstance(‘tx_xajax’);
       
        // Appel à une fonction pour décoder les données
        $this->xajax->decodeUTF8InputOn();
       
        // Encodage de la réponse au format UTF-8
        $this->xajax->setCharEncoding(‘utf-8’);
       
        // Pour éviter les conflits avec l’extension, on rajoute un prefix supplémentaire
        $this->xajax->setWrapperPrefix($this->prefixId);
       
        // Affichage des messages dans la barre de statut
        $this->xajax->statusMessagesOn();
       
        // Mode debug
        $this->xajax->debugOff();
       
        // Nom des fonctions PHP pour le traitement des données (très important)
        $this->xajax->registerFunction(array(‘processFormData’, &$this, ‘processFormData’));
       
        // If this is an xajax request call our registered function, send output and exit
        $this->xajax->processRequests();
       
        // Else create javacript and add it to the normal output
        $GLOBALS[‘TSFE’]->additionalHeaderData[$this->prefixId] =              $this->xajax->getJavascript(t3lib_extMgm::siteRelPath(‘xajax’));

}

4. Vous devez ensuite créer un formulaire en frontend et lui donner un id unique :

$content .= ‘
<form name="formajax" id="formajax"
action="’.$this->pi_getPageLink($GLOBALS[‘TSFE’]->id).’"
method="post"> Field:<input type="text" name="field" id="field" size="20" value="nom"><br> Table :<input type="text" name="table" size="30" id="table"><br>
Criteria:<input type="text" name="critere" size="50" id="critere" value="uid<10"><br> <input type="button" onclick="’ . $this->prefixId . ‘processFormData(xajax.getFormValues(\’submittest\’))" value="Envoyer" > </form><div id="results"> Resultats</div>
‘;

Trois informations importantes :
– le nom du formulaire
– processFormData pour l’évenement onclick. Un évenement onChange aurait également été possible.
– la zone HTML pour la réponse : <div id="results"> Resultats</div>

La fonction processFormData est chargée de récupérer les données et de les traiter.

Dans mon extension :

function processFormData($data) {

        $this->piVars = $data[$this->prefixId];
        
        // On transmet les données reçues à une autre fonction pour le traitement (ex : requête en base)
        $content = $this->sGetFormResult($data["field"], $data["table"],
$data["critere"]);

       // préparation de la réponse
      $objResponse = new tx_xajax_response();
     
      // ‘results’ est le nom de l’id où apparaitra la réponse
      $objResponse->addAssign(‘results’, ‘innerHTML’, t3lib_div::view_array($content));
      return $objResponse->getXML();

}

Voilà, c’est tout simple. N’hésitez pas à poser vos questions ou remarques 🙂

[EDIT]
J’oubliais quelques liens :

Extension xajax sur le TER
Documentation sur le TER
Site officiel xajax

Publicités

4 réflexions au sujet de « De l’Ajax dans une extension TYPO3 »

    Luc a dit:
    02/07/2008 à 16:22

    Tu devrais jeter un coup d\’oeil à Formidable, il s\’agit du framework de RAD de TYPO3 qui inclut notamment de puissante fonction de gestion de l\’ajax ainsi que d\’autre effets "2.0" du type modalbox, accordions, slide etc etc.le tout reponse notamment sur scriptaculous, et se configure via XML.Formidable dispose de bien d\’autres fonctionnalités, générations de formulaires, listers, j\’en passe… c\’est l\’une des plus grandes avancées dans le développement d\’extensions pour TYPO3.

    Rémi a dit:
    02/07/2008 à 16:51

    C\’est vrai qu\’au premier coup d\’oeil ça parrait simple.Mais j\’ai quelques questions :* Est-ce qu\’on peut faire du javascript non intrusif basé sur l\’écoute d\’événement (cad ne pas mettre de onclick en plein milieu du code HTML) ?* Est-ce que si on désactive le javascript on arrive quand même à obtenir la même info qu\’avec la couche XAJAX ?* Est-ce que les temps de réponse sont bons ?Personnellement, j\’utilise jquery ou prototype comme framework JS et eid dans typo3 pour appeler mes fonctions php.

    Christian a dit:
    04/07/2008 à 20:46

    Hello,*
    Est-ce qu\’on peut faire du javascript non intrusif basé sur l\’écoute
    d\’événement (cad ne pas mettre de onclick en plein milieu du code HTML)
    ?=> pas à ma connaissance* Est-ce que si on désactive le javascript on arrive quand même à obtenir la même info qu\’avec la couche XAJAX ?=> javascript obligatoireEst-ce que les temps de réponse sont bons ?Plutôt oui mais le problème que j\’ai rencontré plusieurs fois, c\’est que j\’ai un message de type "Page is beeing generated". Il faut que le plugin ne soit pas mis en cache (USER_INT). Par contre, on peut rediriger les réponses vers une autre instance de plugin de l\’extension, genre un pi2 qui celui ci est mis en cache.

    cédric a dit:
    15/07/2008 à 22:23

    Merci pour cet excellent article 😉 ! un de plus 🙂

Les commentaires sont fermés.