Dans ce TP, on souhaite modifier la page qui liste toutes les
références de notre bibliographie (listAll.jsp).
L’idée ici est de créer le formulaire sur place en javascript au
lieu d’ouvrir une nouvelle page :
Dans les deux cas le bouton « confirmer » envoie les données de formulaire et exécute donc l’action correspondante, et le bouton « annuler » restaure l’affichage normal.
On propose d’implémenter ceci dans une fonction javascript à 4 paramètres
formularise(lien, event, id, action). Pour simplifier, on
introduit déjà l’élément <form> qui contiendra nos champs
dans la page initiale, mais cet élément ne contient initialement aucun
<input>. Téléchargez la nouvelle version de
listAll.jsp ici.
À chacun des liens « confirmer » et « annuler » est associé un
attribut onclick qui appelle formularise
avec les paramètres appropriés. Ces paramètres sont générés par la
page JSP. L’intérêt d’utiliser un attribut HTML onclick
est ici que cela simplifie la récupération de l’identifiant de
l’ouvrage : ${ouvrage.id} dans la page JSP est remplacé
par la valeur de l’identifiant avant envoi au navigateur, donc tous
les attributs onclick dans la page générée sont
différents.
Remarquez que l’attribut onclick est ajouté en plus de
l’attribut href, de la sorte la page continue à
fonctionner comme avant si le script ne marche pas, et il est
également possible d’ouvrir le lien dans un nouvel onglet pour avoir
accès au formulaire non-javascript.
Le but du TP est donc d’écrire la fonction
formularise, dans le fichier formularise.js,
à créer (attention, pas dans le dossier
WEB-INF car ce fichier doit pouvoir être téléchargé par
l’utilisateur).
On vous propose d’implémenter ceci en plusieurs étapes :
la fonction formularise remonte au grand-père DOM du lien, qui est la ligne du tableau (le <a> est dans un <td> qui est dans le <tr> qui nous intéresse). Elle accède aux cellules individuelles via le tableau tr.cells pour modifier leur contenu. Les deux premières cellules ont juste leur style modifié si l’action est "supprimer" et doivent devenir des <input> si c’est "modifier". Dans la troisième cellule
il faut ajouter les champs cachés "id" et "action" et le bouton « confirmer » soumet le formulaire. Dans un premier temps on peut ne pas proposer « annuler » ou mettre un simple lien qui recharge la page.
La quatrième case de la ligne doit devenir un bouton qui réinitialise l’affichage. Pour cela il suffit qu’avant toute modification on récupère le innerHTML du <tr> dans une variable. Ensuite on met à ce bouton un onclick qui restaure ce contenu. Il faut bien utiliser un élément <button> en précisant le type "button" pour ne pas que ce bouton soit lié au formulaire.
Si on clique sur modifier/supprimer une autre ligne, on voudrait que
les modifications sur celle qui était déjà en cours d’édition soient annulées. Pour cela on met un id au bouton "annuler" qu’on crée lorsqu’on génère le formulaire, et la fonction formularise commence par chercher si un élément avec cet identifiant existe et, si oui, appeler son onclick.
S’il vous reste du temps : ajouter des styles CSS afin que le passage du texte au formulaire ne décale pas tout l’affichage (il faut éviter que les lignes et les colonnes du tableau changent de dimension).