Discussion :

[Ushuango]

Bonjour,

voici mon souci:
un tableau affiche des résultats . Dans chaque ligne de résultat, il y a une bouton qui permet d'avoir plus de renseignement sur la ligne en question.
un modale s'ouvre et affiche les renseignements complémentaires.

Dans cette modale , on affiche des images , et d'autres choses.
la partie qui affiche les images est une liste remplie avec des <li>, une image par <li>.
Comment je récupère les images: à chaque ligne du tableau correspond un code ( id ) avec lequel je fait une requète et chaque id peut retourner 0 ou plusieurs
url qui pointent vers une image.
J'ai quelque part dans mon javascript une fonction qui ajoute à la liste un <li> contenant une image <img> avec pour attribut "src", l'url en question.

je peut cliquer sur une ligne qui va ensuite me charger dans la modale 88 images !!
Ça met un certain temps, et si pendant ce temps, je ferme la modale et que je clique sur une autre ligne du tableau, les images qui n'ont pas eu le temps de charger
continuent de s'afficher dans la nouvelle modale ! ( alors qu'elles ne correspondent pas du tout au sujet ) et s'ajoutent ensuite les images qui correspondent vraiment à la ligne en question.

Exemple:
je clique sur la première ligne, 100 images sont appelées, j'en laisse 40 s'afficher, je ferme la modale et je clique sur la ligne numéro 2.
Celle-ci appelle 3 images et du coup: les 60 images de la première ligne s'affichent sur la modale de la deuxième ( pas prévu ) et viennent ensuite les 3 images voulues.

Comment éviter ce phénomène. Parce qu'au final, ça n'affiche pas les bonnes informations !!!

[tag9724]

Il suffit de rajouter une condition pour stopper l'ajout d'image dans la modal quand on quitte celle-ci ou en ouvre une autre.

Une solution possible serais par exemple de créer une variable qui s'incrémenterais à chaque ouverture de modal, ainsi tu aurais un "index" de la modal ouverte.
Ca pourrais ressembler à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
let modalIndexGlobal = 0
 
function ouvrirModal() {
  modalIndexGlobal += 1
  const modalIndexLocal = modalIndexGlobal
 
  /* Ici l'ajout successif des images */
 
}

De ce fait dans ta fonction ouvrirModal tu pourras vérifier avant l'insertion d'une image dans la modal si l'index actuel correspond toujours a celui global, si les deux ne correspondent pas cela voudra dire qu'une autre modal aura été ouverte entre temps.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (modalIndexLocal === modalIndexGlobal) {
  ajouterImage()
}

Après il y a bien des façons de faire ce que tu demande et très certainement de meilleurs méthodes que celle-ci mais ce sera déjà un bon début je pense.

[Ushuango]

il se trouve que j'ai tenté ça avant de voir votre réponse !!!!
Mais d'une autre façon:
une variable qui est false au départ et passe à true si on appui sur la croix pour fermer.
avec cette condition, je stoppe les requêtes et l'affichage d'image ( même si les requêtes se font rapidement et sont terminées avant de cliquer, c'est plus prudent)

Et effectivement, c'est ce qu'il fallait faire. J'aurai trouvé tout seul ?
(comme quoi après une bonne nuit de sommeil )

Merci quand même : ça confirme que mon approche était la bonne.