Dans un projet web où il y avait un certain nombre de listes d'entrées suffisamment longues qu'on devait utiliser la barre défilante verticale, un des requis ajouté tardivement était de rediriger l'utilisateur au bon endroit dans la liste suite à l'ajout ou la modification d'un enregistrement. Une fois modifié, une redirection s'effectuait vers la liste de gestion en incluant comme paramètre GET de l'URL l'identificateur unique (clé primaire) de l'entrée.
D'ordinaire, le positionnement à un emplacement spécifique de la page se fait par un ancre HTML. Un peu démodé mais ça fonctionne bien quand on en a besoin. Puisque chaque élément de la liste possèdait un attribut ID, j'aurais pu modifier chaque lien de redirection vers les listes pour y ajouter un hash tag (#element-id).
Mais bon, le problème c'est qu'il y a tellement de liens qui redirigent vers ces listes et j'en ai perdu la trace et que je voulais être certain de ne pas en oublier. La meilleure solution qui s'offrait à moi était de le déléguer aux pages des listings.
Si la liste est chargée et qu'elle possède un paramètre GET avec le numéro de l'entrée ajoutée ou modifiée, une instruction JavaScript ajouterait l'ancre automatiquement pour se positionner au bon endroit dans la page.
Et c'était incroyablement simple à faire. Il suffit d'appeler la ligne suivante en indiquant le nom de l'ancre (composé d'un terme générique et du numéro d'enregistrement, par exemple elem-999) :
window.location.hash = 'id-unique-de-l-ancre';Tellement simple que je n'avais aucun souvenir que ça existait. C'était la première fois que je l'utilisais celle-là. Et c'est là que je me dis que ça serait une bonne idée de réviser mes notions de base de JavaScript...
Soyez certain d'attendre que la page est complètement chargée avant d'appeler location.hash (par exemple, à l'intérieur de $(document).ready() de jQuery).