Listes dépendantes : avec ou sans XMLHttpRequest (1/11) |
Les délires «Ajax or not Ajax» |
|
 |
Comme toujours, c'est à la suite d'un coup de pouce que je me suis décidé à faire ce tuto. Merci à sylkan qui est à l'origine de cette demande.
Le problème posé est d'actualiser une liste déroulante en fonction de la précédente.
Bien sûr cette cascade de listes déroulantes peut s'étendre à l'infini (j'exagère).
Toutefois deux techniques peuvent être utilisées.
Soit par XMLHTTPRequest, soit par chargement dans des tableaux de toutes nos listes.
Nous allons essayer de voir ces deux techniques pas à pas, en augmentant le nombre de listes dépendantes, que ce soit en ASP ou en PHP.
|
Préambule -
Les bases de données -
Une liste avec XMLHttpRequest -
Une liste sans XMLHttpRequest -
Deux listes avec XMLHtpRequest -
Deux listes sans XMLHtpRequest -
Trois listes avec XMLHttpRequest -
Trois listes sans XMLHtpRequest -
Et en paramétrant -
Sans l'option "Tout" -
Bonus : découper par lettre
Préambule
| Ajax ? XMLHttpRequest ? C'est quoi ce truc ? |
Si, après avoir lu les articles cités en référence ci-dessus, vous n'avez toujours rien compris, alors, essayons de parler simplement.
Ce système, au nom compliqué à retenir, permet de modifier une page sans avoir à la recréer complétement,
comme c'est souvent le cas d'ailleurs sur de nombreux sites.
En effet, on va pouvoir, par exemple, actualiser une partie de la page uniquement, en allant chercher les
informations dans une base de données et en actualisant l'objet concerné sur la page.
Comme ceci, par exemple (tester) :
En changeant la sélection dans la liste déroulante, on actualise les données relatives au client sélectionné sans recharger l'intégralité de la page. Télécharger cet exemple (sans la table MySQL)
|
|
|
| Bases de travail |
Je suis parti des exemples des listes (B.A.Ba ci-dessus) et du tuto de Didier sur Ajax que j'ai retravaillés à mon goût donc ne vous étonnez pas de retrouver les mêmes noms de champs, les mêmes structures, etc.
J'ai supprimé le superflu et ajouté des améliorations.
J'ai adapté pour que ça fonctionne, sur mon PC, sous FireFox 3 et sous IE 7 mais n'ai pas testé avec d'autres navigateurs.
Dans le cas d'Ajax, j'ai ajouté, dans les listes déroulantes, la possibilité de choisir «Tout».
Ainsi, en choisissant «France» comme pays, «Ile de France» comme région, «Tout» comme département, on obtiendra,
dans la dernière liste déroulante, l'ensemble des villes d'Ile de France.
Toutefois, il faut bien comprendre que, malgré tout ça, chacun pourra adapter ces codes à sa propre «sauce».
Le plus important étant de comprendre le principe pour pouvoir le reproduire ensuite.
|
|
|
Exemple de l'option "Tout" ajoutée dans le mode "avec XMLHttpRequest" :
(Attention, seulement 5 ou 6 villes ont été saisies pour tester les modules)
TESTEZ la démo "sans XMLHttpRequest" (Pays, Régions, Départements) :
| Principe |
Pour mettre en pratique ce tuto, j'ai choisi de reprendre l'exemple pour lequel on a sollicité mon aide (n'est-ce pas sylkan ?).
Ainsi, nous allons sélectionner des pays ayant des régions ayant des départements ayant des villes...
On pourrait bien sûr continuer en ajoutant ...ayant des rues ayant des maisons ayant des habitants...
Mais une fois le principe compris pour un, puis réussi à être implémenté pour deux, puis trois,
je ne pense pas qu'il soit nécessaire de le rendre infini ;)
Lorsque nous utiliserons Ajax et l'objet XMLHTTPRequest, nous effectuerons des requêtes en accédant à notre base de données. Le module effectuant cette requête nous retournera du code JavaScript que nous exécuterons.
Dans ce cas de figure, nous pourrons donc sélectionner des enregistrements en fonction de critères et notamment un identifiant.
Par contre, dans le cas du traitement purement interne, nous utiliserons des tableaux chargés en mémoire.
Dans ce deuxième cas, il faudra trouver une astuce pour que le pays 11 et la région 2 ne nous donne pas le pays 1 et la région 12.
Le principe utilisé pour distinguer ces éléments sera de constituer une clef unique en mettant bout à bout les identifiants mais en les séparant avec un caractère. Dans l'exemple ci-dessus, nous aurons «1 12» et non «11 2».
Nous effectuerons alors une modification de notre liste directement à partir de l'un de ces tableaux chargés en mémoire après avoir recherché l'identifiant qui nous intéresse.
Mais passons maintenant dans le vif du sujet...
|
|
|
DB77 le
08/02/2011 (53 299 hits) |
|
|
Forum |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Annuaire
