Discussion :

[Asdorve]

bonjour,

Je suis en train d'implémenter sur mon site ceci:
https://www.w3schools.com/howto/tryi...ss_js_lightbox

Cependant, toute la partie php est appelée via une requête ajax.

Mon problème est le suivant: j'ai une erreur d'execution

Uncaught TypeError: Cannot read property 'style' of undefined at showSlides

pour le code suivant:

Code :

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

slides[i].style.display = 'none';

Lorsque je clique sur une des images, j'ai l'erreur suivante:

Uncaught TypeError: Cannot read property 'style' of undefined
at showSlides (index.php:275)
at currentSlide (index.php:261)
at HTMLImageElement.onclick (index.php:1)

qui correspond à:

Code :

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

1
2
3
4
 
slides[i].style.display = 'none';
showSlides(slideIndex = n);
openModal(); currentSlide(1);

J'ai l'impression que le script appelé en fin de page ne tient pas compte des éléments chargés.

Est-ce bien ça? Dans tout les cas, comment je peux corriger ce problème?


Merci d'avance

[SpaceFrog]

tu es bien dans le callback de l'ajax ?

[Asdorve]

Non, je suis juste avant la balise body.

Mais j'ai testé de déplacer ce script ailleurs, mais sans succès.

Voici mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 $.post(
            'article.php', // Le fichier cible côté serveur.
            {
                code : $("#code").val(),
                cc : $("#cc").val() ,
 
 
            },
            nom_fonction_retour, // Nous renseignons uniquement le nom de la fonction de retour.
            'text'  // Format des données reçues.
 
        );

C'est ici que je dois placer mon script suivant?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
function openModal() {
	  document.getElementById('myModal').style.display = 'block';
	}
 
	function closeModal() {
	  document.getElementById('myModal').style.display = 'none';
	}
 
	alert ('ok');
 
	 var slideIndex = 1;
     showSlides(slideIndex);
 
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName('mySlides');
  var dots = document.getElementsByClassName('demo');
  var captionText = document.getElementById('caption');
 
 
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i <= slides.length; i++) {
      slides[i].style.display = 'none';
  }
  for (i = 0; i <= dots.length; i++) {
      dots[i].className = dots[i].className.replace(' active', '');
  }
  alert(slideIndex);
 
  slides[slideIndex].style.display = ' block';
  dots[slideIndex].className += ' active';
  captionText.innerHTML = dots[slideIndex].alt;
}

[SpaceFrog]

ta fonction callback c'est nom_fonction_retour,
je ne la vois pas dans ton code ...

[Asdorve]

Je ne l'ai pas mise, mais elle y est.

Code :

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

1
2
3
4
5
6
7
 
function nom_fonction_retour(texte_recu){
    // Du code pour gérer le retour de l'appel AJAX.
    document.getElementById('return_comment').innerHTML = texte_recu;
 
 
}

[SpaceFrog]

tu as testé qu"'elle reçoit bien l'argument?

[Asdorve]

oui.

Mais je viens de m'apercevoir d'une chose, c'est qu'en changeant l'id de mes balises, ça fonctionne. Je dois avoir des id redondants avec une autre partie du code.

Merci en tout cas d'avoir pris le temps de me répondre.

[SpaceFrog]

En effet un id doit être unique sur la page.
Pour éviter les doublons d'id il est parfois utile d'utiliser un nommage rationnel des id avec des préfixes par destination...