Partage
  • Partager sur Facebook
  • Partager sur Twitter

Remplir 2 listes dynamiquement dans 1 compo JOOMLA avec AJAX

23 mars 2010 à 12:51:18

Bonjour à tous et toutes,

Je voudrais créer un nouveau composant JOOMLA qui permettrait d'afficher 2 listes à l'écran (combobox) : 1 première qui serait une liste de pays et une deuxième qui serait une liste de ville en fonction du pays sélectionné. Je voudrais le faire en ajax pour le raffraichissement de la page mais je ne vois pas comment faire?

D'après ce que j'ai compris et en suivant les tuto dans 1 composant JOOMLA :
- il y a le modèle dans le dossier models pour les requêtes SQL : 1 fonction pour la liste des pays et 1 fonction pour la liste des villes.
- il y a le template et le code HTML : dans le dosser tmpl
- Les variables à passer au template : view.html.php où là je dois récupérer ma liste de pays et ma liste de villes dans des tableaux en faisant un getList

Mais le problème c'est que je ne vois pas comment je peux faire ma requête pour la liste des villes en fonction du pays que j'ai sélectionné et utilisé l'AJAX pour raffraîchir la page ?

J'arrive à avoir ma liste de pays mais par contre je ne sais pas comment je peux faire pour exécuter la requête en fonction du pays sélectionné?

Pouvez-vous m'aider car je séche vraiment ?

Merci d'avance.
__________________
  • Partager sur Facebook
  • Partager sur Twitter
11 octobre 2010 à 15:39:01

désolé de remonter le sujet, mais étant confronter au même problème depuis un ptit paquet d'heure, je n'avais pas d'intérêt à recréer un sujet similaire! donc si quelqu'un pouvais me/nous aider sur ce petit problème, ca serais sympa!
  • Partager sur Facebook
  • Partager sur Twitter
18 août 2011 à 10:58:42

Salut !

Je pense qu'il est un peu tard pour vous venir en aide :D
Cependant, j'ai eu le même souci que vous lors de mon stage et je souhaite apporter mon aide aux personnes qui en auront besoin dans le futur :)

La solution que je vous propose est le développement d'un composant (je m'excuse d'avance auprès des puristes Joomla! si mon code vous chiffonne lol)

Ce qui suit n'est pas un cours mais une réponse au sujet, ce qui suppose que vous disposez de connaissances concernant Joomla! et le MVC.


La structure du dossier est :

/com_liste
--->/admin
------>admin.liste.php
------>controller.php
------>index.html
------>install.liste.sql
------>uninstall.liste.sql
--->/site
------>/assets
--------->/js
--------->script.js
------>/views
--------->/liste
------------->/tmpl
---------------->default.php
---------------->index.html
------------->index.html
------------->view.html.php
------>index.html
--->controller.php
--->index.html
--->liste.php
-->liste.xml

Nous ne nous attarderons pas sur tout ce qui se trouve dans le dossier admin puisque notre composant ne nécessite pas de partie administrateur. Il est toutefois nécessaire d'avoir un dossier admin dans un composant.

/com_liste/admin/admin.liste.php
<?php
defined('_JEXEC') or die('Restricted access');
?>

<h2>Administration</h2>
<h3 align="center">Composant Liste - Version 1.0</h3>

<div style="border:solid 1px #000000;padding:10px;margin:10px">
	<b>Exemple de listes liées dynamique avec Mootools</b>
</div>


/com_liste/admin/controller.php
<?php

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

jimport( 'joomla.application.component.controller' );

class ListeController extends JController
{
	function __construct($config = array())
	{
		parent::__construct($config);

	}

	function display( )
	{
		
		parent::display();
	}
}
?>


Tous les fichiers index.html auront la structure suivante :
<html><body bgcolor="#FFFFFF"></body></html>

Ce fichier n'est là que par mesure de sécurité dans le cas où un internaute tenterait d'accéder directement au dossier (ex : http://www.votresite.com/components/com_liste/admin).

/com_liste/admin/install.liste.sql : Fichier de création des tables pays et villes
CREATE TABLE IF NOT EXISTS `#__pays` (
  `idPays` int(11) NOT NULL AUTO_INCREMENT,
  `nomPays` varchar(100) NOT NULL,
  PRIMARY KEY (`idPays`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

INSERT INTO `#__pays`(`idPays`,`nomPays`) VALUES 
(NULL, 'Allemagne'),
(NULL, 'Brésil'),
(NULL, 'Canada'),
(NULL, 'Etats-Unis'),
(NULL, 'France'),
(NULL, 'Italie');

CREATE TABLE IF NOT EXISTS `#__villes` (
  `idVille` int(11) NOT NULL AUTO_INCREMENT,
  `nomVille` varchar(100) NOT NULL,
  `idPays` int(11) NOT NULL,
  PRIMARY KEY (`idVille`),
  FOREIGN KEY (idPays) references #__pays(idPays)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

INSERT INTO `#__villes`(`idVille`,`nomVille`,`idPays`) VALUES
(NULL,'Berlin',1),
(NULL,'Hambourg',1),
(NULL,'Dortmund',1),
(NULL,'Rio de Janeiro',2),
(NULL,'Sao Paulo',2),
(NULL,'Salvador da Bahia',2),
(NULL,'Montréal',3),
(NULL,'Québec',3),
(NULL,'Vancouver',3),
(NULL,'New York',4),
(NULL,'Los Angeles',4),
(NULL,'Washington',4),
(NULL,'Bordeaux',5),
(NULL,'Paris',5),
(NULL,'Toulouse',5),
(NULL,'Rome',6),
(NULL,'Turin',6),
(NULL,'Syracuse',6);


/com_liste/admin/uninstall.liste.sql : Ce fichier sert à la suppression des tables nécessaires au composant dans le cas où on le désinstalle
DROP TABLE `#__pays`;
DROP TABLE `#__villes`;


------------------------

/site/assets/js/script.js : C'est dans ce fichier que nous mettons notre code AJAX
Je ne m'étendrai pas sur l'explication de ce fichier, il est assez simple à comprendre si vous avez quelques notions d'AJAX. Dans le cas contraire, je vous invite à lire ces cours : http://ajax.developpez.com/cours/
window.addEvent('domready', function(){
	
	/* Version pour Mootools 1.2.x et 1.3.x */
	$('pays').addEvent('change', function(){
		var idPays = $('pays').options[$('pays').selectedIndex].value;
		var url = 'index.php?option=com_liste&task=remplirListeVilles';
		var requete = new Request({
						url : url, 
						method : 'post',
						onComplete : function(responseText){
										$('ville').innerHTML = responseText;
									}
						}).send('idPays='+idPays);
	});
});


Vous trouverez parfois un dossier models qui contient les modèles des différentes vues. Dans notre cas, je n'ai pas jugé nécessaire de créer un modèle spécifique à ma vue liste puisque c'est la seule vue de ce composant (après, ça ne reste que mon avis :) )


/site/views/liste/tmpl/default.php
<?php 
// no direct access
defined('_JEXEC') or die('Restricted access');

JHTML::_('stylesheet', 'default.css', 'components/com_liste/assets/css/'); 
JHTML::script('script.js', 'components/com_liste/assets/js/',true); 
?>
<h1>Liste</h1>
<fieldset>
	<select id="pays">
		<?php 
			echo $this->listepays;
		?>
	</select>
	
	<select id="ville">
		<option value="0">Sélectionner une ville</option>
	</select>
</fieldset>


/site/views/liste/view.html.php
<?php
jimport( 'joomla.application.component.view');

class ListeViewListe extends JView {

	function display($tpl = null)	{
	
		$db		=& JFactory::getDBO();
		
		$requete = "SELECT * FROM #__pays";
		$db->setQuery($requete);
		$lesPays = $db->loadObjectList();
		
		$listepays = '<option value="0">Sélectionner un pays</option>';
		
		foreach($lesPays as $pays)
		{
			$listepays .= "<option value='".$pays->idPays."'>".$pays->nomPays."</option>";
		}
		
		$this->assignRef('listepays', $listepays);
		
		parent::display($tpl);
	}
}
?>


/site/controller.php
<?php
jimport('joomla.application.component.controller');

class ListeController extends JController{

	function display()	{
		global $mainframe;
		
		parent::display();
	}
	
	function remplirListeVilles() {
        global $mainframe;
		$db		=& JFactory::getDBO();
		
		$idPays = JRequest::getInt('idPays', '');
		$requete = "SELECT * FROM #__villes WHERE idPays = ".$idPays;
		echo $requete;
		$db->setQuery($requete);
		$lesVilles = $db->loadObjectList();
		
		$listeVilles = "<select id='ville'><option value='0'>Sélectionner une ville</option>";
		
		foreach($lesVilles as $ville)
		{
			$listeVilles .= "<option value='".$ville->idVille."'>".$ville->nomVille."</option>";
		}
		
		echo $listeVilles."</select>";
    }
}

?>


/site/liste.php
<?php
	defined('_JEXEC') or die('Restricted access');
 
	// Require the base controller
	require_once( JPATH_COMPONENT.DS.'controller.php' );
	 
	// Require specific controller if requested
	if($controller = JRequest::getWord('controller')) {
		$path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';
		if (file_exists($path)) {
			require_once $path;
		} else {
			$controller = '';
		}
	}
	 
	// Create the controller
	$classname    = 'ListeController'.$controller;
	$controller   = new $classname( );
	 
	// Perform the Request task
	$controller->execute( JRequest::getWord( 'task' ) );
	 
	// Redirect if set by the controller
	$controller->redirect();
	
?>


liste.xml
<?xml version="1.0" ?>
<install version="1.5.7" type="component">
	<name>liste</name>
	<creationDate>27/07/2011</creationDate>
	<author>Didic</author>
	<copyright>Didic(C) 2011</copyright>
	<license>test</license>
	<authorEmail>contact@example.com</authorEmail>
	<authorUrl></authorUrl>
	<version>1.0</version>
	<description>Exemple de listes liées dynamique avec Mootools</description>
	
	<files folder="site">
		<filename>assets/js/script.js</filename>
		<filename>views/liste/tmpl/default.php</filename>
		<filename>views/liste/tmpl/index.html</filename>
		<filename>views/liste/view.html.php</filename>
		<filename>views/liste/index.html</filename>
		<filename>views/index.html</filename>
		<filename>controller.php</filename>
		<filename>index.html</filename>
		<filename>liste.php</filename>
	</files>
	
	<administration>
		<menu>Exemple de listes liées dynamique avec Mootools</menu>
		<files folder="admin">
			<filename>admin.liste.php</filename>
			<filename>controller.php</filename>
			<filename>index.html</filename>
			<filename>install.liste.sql</filename>
			<filename>uninstall.liste.sql</filename>
		</files>
	</administration>
	
	<install>
		<sql folder="admin">
			<file driver="mysql" charset="utf8">install.liste.sql</file>
		</sql>
	</install>
	
	<uninstall>
		<sql folder="admin">
			<file driver="mysql" charset="utf8">uninstall.liste.sql</file>
		</sql>
	</uninstall>
</install>


Pfiouu enfin terminé ! :-°

Une fois le dossier com_liste recopié, vous devrez le compresser en .zip et l'installer à partir de l'administration de Joomla! (je vous laisse faire lol)
Pour ceux qui développent sur Joomla! 1.6.x et supérieur, il faudra créer un fichier default.xml dans le dossier /site/views/liste/tmpl/ afin de créer un lien de menu sur le composant.


default.xml
<?xml version="1.0" encoding="utf-8"?>
<metadata>
	<layout title="COM_LISTE_LISTE_VIEW_DEFAULT_TITLE">
		<message>COM_LISTE_LISTE_VIEW_DEFAULT_DESC</message>
	</layout>
</metadata>


Voilà j'espère vous avoir aidé (si vous avez lu jusqu'ici lol) et n'hésitez pas si vous avez des questions. :)

Didic
  • Partager sur Facebook
  • Partager sur Twitter
9 juillet 2018 à 7:52:17

Ce sujet est très intéressant, Pourriez-vous nous faire parvenir sa traduction en Joomla 3.8 avec l'arrivée de nouveaux outils.
  • Partager sur Facebook
  • Partager sur Twitter
Alain G. Lagune
Staff 9 juillet 2018 à 8:27:23

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet.

  • Partager sur Facebook
  • Partager sur Twitter