Créez des menus déroulants auto-renseignés avec AJAX

Et voici une nouvelle utilisation du concept AJAX. La création des plusieurs menus qui s’auto-remplissent en fonction du choix de l’internaute.

En fonction du choix de l’utilisateur sur la 1ère liste, le contenu de la 2ème liste est construit à partir de fichiers textes. Les informations sont stockées sur le serveur dans des fichiers textes.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Créez des menus déroulants auto-renseignés avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continue la mise en pratique du système Ajax et surtout pour le mettre en pratique dans votre développement, là on va créer un système de menu déroulant. Alors qu’est-ce qu’on va faire avec Ajax ?

Création de Menus déroulants

Il y aura plusieurs listes déroulantes, sur la liste déroulante en fonction du choix de l’utilisateur, en directe on va charger la deuxième liste déroulante avec plusieurs choix que l’utilisateur pourra sélectionner, c’est très pratique les listes déroulantes sont vides et en fonction du choix de l’utilisateur, la deuxième liste aura des éléments différents. Et tout ça grâce à Ajax, et les informations de chaque liste, sont stockées sur des fichiers textes différentes, ça va accélérer les temps de chargement ça va être très rapide.

Je passe tout de suite à la pratique, avec l’exemple de code source. Vous avez vos deux menus déroulants et en fonction du choix que vous allez faire, le deuxième élément va charger, le premier est déjà chargé et en fonction du choix, là il est vide, en fonction du premier choix, cette deuxième liste va se remplir, tout simplement. Alors trois fichiers textes avec le contenu à afficher dans la deuxième liste déroulante, donc les navigateurs, les langages de programmation, les operating system, trois fichiers textes très simple, très légers, très rapides à charger, et le fichier HTML, avec les deux listes, ici, alors getListContent qu’est-ce qu’on fait dedans ?
Comme vous l’avez sûrement deviné, là on va utilisez l’objet XMLHttpRequest. Donc on récupère le choix de l’utilisateur, la valeur, le texte associé, ont construit l’URL du fichier texte à charger, et ensuite on va construire le contenu de notre deuxième liste.
Qu’est-ce qu’on fait ?
Ça c’est comme d’habitude ça ne change pas, on récupère la réponse texte, on le transmet à la fonction buildFormContent avec le contenu, donc le contenu du fichier texte, on fait un split, ce que vous avez vu que tous les éléments de la liste sont séparés par des dièses, caractère de séparation dièse, ici, on fait un split, on récupère un tableau et à chaque fois, on rempli les différents choix de la liste. OS on a chargé notre fichier texte on a le choix entre Windows 7 etc., si je choisis navigateur, la liste programmation pardon, la liste est réinitialisée avec différent langage de programmation, voyez en-dessous on charge des fichiers textes différents, si je choisis navigateur un nouveaux fichier texte qui est chargé, et là ce sera un choix Internet Explorer, Google Chrome, etc.
Si je fais « Faites votre choix », aucun chargement n’a été effectué donc la liste ne change pas. Je recharge les OS et je tombe sur Mac Os, c’est une application vraiment très simple, voyez le code source, il y a presque rien, c’est toujours le même code identique et ensuite vous faites un chargement d’URL différentes et un traitement différent.

Votre plan d’actions !

Tout ça, ces exemples, ça vous montre la puissance d’Ajax et surtout sa simplicité extrême à l’utiliser, donc utilisez cet exemple dans vos applications, dans votre site Internet, si vous avez des questions, posez-les directement sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple AJAX menus déroulants

Et voici le code source commentés de cette application AJAX avec des menus déroulants.

Partagez vos formulaires AJAX

Utilisez ce concept d’actions de l’utilisateurs qui entraînent un appel AJAX et remplissage automatique d’un formulaire. Partagez, dans les commentaires, votre code source et le résultat de vos applications web 2.0.