Exercices avec jQuery et Ajax

Un peu d'Ajax et de jQuery

Le cours en version transparents et en version article.

Les bons tutoriaux sur Ajax sont chez

C'est directement chez jQuery que vous pourrez à la fois télécharger la bibliothèque et trouver de bons tutoriaux sur jQuery. La documentation de l'API est bien faite et est une mine d'informations.

  1. Récupérez la page ajax1.html ainsi que data.xml.
  2. Modifiez le code pour que les mêmes informations apparaissent maintenant dans une liste énumérée sous le formulaire.
  3. Modifiez le code pour que le texte du fichier data.xml contienne maintenant des balises html et que son contenu ne soit pas affiché das la zone de texte mais dans une boîte en-dessous.
  4. passez l'exercice avec jQuery!

Pour les exercices suivants, vous travaillerez avec jQuery.

On reprend l'exercice du LMD mais les textes explicatifs sont dans trois fichiers différents (sur le serveur).

Soit une page HTML contenant une liste :

Lorsque la souris passe sur chacun de ces éléments, elle doit afficher dans une boîte à droite un petit texte explicatif (Ceci est un diplome Bac+3, Ceci est un diplome Bac+5, Ceci est un diplome Bac+8).

Proposez une solution à l'aide d'Ajax.

Une page contient dans une liste déroulante le nom de vos enseignants préférés.

Lorsqu'un internaute sélectionne un nom dans la liste, la photo de l'enseignant apparaît.

C'est un programme php (sur le serveur) qui possède les liaisons nom de l'enseignant <-> url de la photo dans un tableau associatif.

Proposez une solution à l'aide d'Ajax.

Exercice à rendre

On reprend l'exercice des adhérents de la bibliothèque. Proposez une solution avec Ajax (en vous aidant de la bibliothèque jQuery) qui évite de charger toutes les informations.

  1. Vous pouvez utiliser un autre SGBD (MySQL) ou votre propre serveur de bases de données Postgres. Vous trouverez ici le script de création et de peuplement de la base.
  2. Écrivez une page qui récupère la liste des adhérents et la propose dans une liste déroulante. On doit pouvoir choisir un adhérent de deux manières différentes : soit dans la liste déroulante, soit en saisissant le nom de l'adhérent. Une autocomplétion doit alors être proposée pour aider l'utilisateur.
  3. Lorsqu'un adhérent est choisi dans la liste, les titres des livres empruntés par cet adhérent doivent apparaître dans une boîte à côté de la liste déroulante. Un lien sur le livre doit permettre d'accéder aux détails sur ce livre (auteur, thème, éditeur) et de les afficher dans la même page.
  4. Un fonctionnement similaire doit permettre d'accéder à ce même genre d'informations par le choix d'un auteur ou d'un thème.
  5. Ajoutez un menu à votre site pour accéder à ces fonctionnalités.

Votre site devra bien sûr être agréable à la navigation, et posséder une CSS appropriée.

Le travail est à rendre pour le 7 octobre 2013 à 13h30.