Compatibilité Joomla!

Lorsque l'on développe une extension pour Joomla! on chercher souvent à créer une requête Ajax pour charger des données à la volée sans devoir recharger la page. Cette technique très intéressante offre de nombreuses possibilités de développement à condition d'arriver à réaliser cette tâche. Voyons plus en détail comment faire...

Prenons l'exemple d'un composant com_demo dans lequel on a une vue default.php et un fichier javascript demo.js. Dans la vue default.php on va afficher un bouton qui affichera le résultat de la requête dans une zone.

Code HTML  du bouton :

	<div id="renderbutton" class="button"><?php echo JText::_('COM_DEMO_BUTTON'); ?></div>

Code HTML de la zone de résultat :

	<div id="renderarea"></div>

Ce sont nos éléments principaux qui vont recevoir les actions de la requête mais ça ne sert pas à grand chose si on n'a pas de données à envoyer au fichier. On crée alors des champs de formulaire pour la saisie des données et une zone pour afficher les informations issues de la requête.

Voici le code final :

	<div id="renderbutton" class="button"><?php echo JText::_('COM_DEMO_BUTTON'); ?></div>

	<div id="loading"></div>

	<div id="renderarea"></div>

	<input class="ajax" type="text" name="fieldajax1" id="fieldajax1" size="10" value="" />

	<input class="ajax" type="text" name="fieldajax2" id="fieldajax2" size="10" value="" />

Le code HTML est maintenant en place, rien de plus simple ! Répérez bien les ID appliqués aux éléments car on va les récupérer pour y ajouter un peu d'action. On edite le fichier demo.js pour y ajouter ces lignes :

	var renderAction = new Class({

	    initialize: function() {

	        var myurl = "index.php?option=com_demo&view=demo&layout=ajaxfile&tmpl=component";

	        var fields = document.getElements('.ajax').getProperties('name','value');

	        fields = JSON.encode(fields);

	       

	            var packageRequest = new Request.HTML({

	                url:myurl,

	                method: 'post',

	                data: { "fields":fields },

	                update: document.id('renderarea'),

	                onRequest: function(){

	                    document.id('loading').set('text', 'Loading...');

	                },

	                onSuccess: function(){

	                    document.id('loading').set('text', '');

	                },

	                onFailure: function(){

	                    document.id('loading').set('text', 'Error when trying to render the menu');

	                }

	

	            });

	            packageRequest.send();

	    }

	});

	

	window.addEvent('domready', function() {

	    document.id('renderbutton').addEvent('click',function(){

	        new renderAction();

	    });

	});

Décortiquons un peu la chose car ça parait bien compliqué tout ça !

var myurl = "index.php?option=com_demo&view=demo&layout=ajaxfile&tmpl=component";

on définit l'url qui pointe vers le fichier cible de la requête, ici ajaxfile.php qui se trouve dans la vue demo et on ajoute tmpl=component pour ne pas charger les styles du template mais uniquement le layout du composant.

var fields = document.getElements('.ajax').getProperties('name','value');
fields = JSON.encode(fields);

Ici on récupère les noms et valeurs de nos champs de formulaire qui ont la classe ajax sous forme d'un tableau de valeurs qu'on convertit en chaine de caractères unique à l'aide de JSON pour la transmettre comme variable POST.

update: document.id('renderarea'),

Ici on définit simplement la zone HTML de la page dans laquelle afficher le résultat du fichier ajaxfile.php que l'on appelle

Voilà on vient de créer notre requête ajax, mais maintenant que fait-on de tout ça ? il suffit de récupérer les données dans le fichier cible et les traiter. Je vous donne une petite astuce pour faire cela.

Code PHP du fichier ajaxfile.php :

	<?php

	

	// No direct access to this file

	defined('_JEXEC') or die('Restricted access');

	$fields = JRequest::getVar('fields'); // On récupère la variable fields de la requête

	$fields = json_decode($fields); // on decode les valeurs dans un tableau

	

	$result = new stdClass();

	foreach ($fields as $field) {

	    $fieldName = $field->name;

	    $result->$fieldName = $field->value;

	}

	

	var_dump($result); // output the result

	?>

Là on va me dire mais c'est quoi ce truc ? tout simplement on récupère la variable fields envoyée et on la décode (avantage du JSON est qu'il est utilisable en javascript aussi bien qu'en PHP ce qui nous permet ici de décoder). Ensuite on crée une boucle pour générer un objet de valeurs.

Exemple avant la boucle : $fields[0]->name = fieldajax1, $fields[0]->value = valeurduchamp

Exemple après la boucle : $fields->fieldajax1 = valeurduchamp

Vous voyez que c'est bien plus pratique à utiliser ! Bon développement...