Modification du contenu de la cellule d'un tableau pour afficher le contenu d'un [Résolu]

Signaler
Messages postés
14
Date d'inscription
samedi 7 mars 2020
Statut
Membre
Dernière intervention
17 novembre 2020
-
Messages postés
14
Date d'inscription
samedi 7 mars 2020
Statut
Membre
Dernière intervention
17 novembre 2020
-
Bonjour,



Configuration: Windows / Chrome 86.0.4240.198

Sur mon site, j'affiche une page contenant une liste de leçon. Pour pouvoir accéder au contenu de la leçon, le visiteur clique sur un bouton et là le contenu d'une des cellules de la ligne est compléter avec les informations reçues de la requête Ajax.
La requête AJAX fonctionne bien. Seul l'affichage ne fonctionne pas, ou alors systématiquement sur la première ligne.

Voici mon code
<table class="tableau">
					<tr class = "text-center">
    					<th>                  </th>
    					<th>Libellé</th>
    					<th>Description</th>
    					<th>  </th>
    				</tr>
                	<?php 
                	$ind = 0;
                	foreach ($listeLecon as $sst) : ?>            
                	<tr>
                		<td width="10%">
	                		<?php if ($sst['img_lecon'] != NULL)  {
                             		    $image = $sst['img_lecon'];
	                        		    $imageLecon = 'src="Videotheque/Vue/Images/'.$image.'"';
	                        		    echo '<img width="120rem"'.$imageLecon.'>';
                		              }
                		    ?>
                		</td>    
                   		<td width="45%" > 
                   			<?php 
                        	    echo $sst['lb_lecon']. ' </a>';
            	            ?>
            	       </td>
               
                   		<td id=listeEns width="40%"  class="tdcommentaire"><?= $sst['res_lecon'] ?> 
                		</td>
                   		
                   		<td width="5%" >
                   			<?php 
                   			$ind ++;
                   			if ($sst['ens_unique'] == 0 ) {
                   			    $lienEns = '<a target="_blank" href="https://www.youtube.com/watch?time_continue=5&v='.$sst['URL_Youtube'].'">';
                   			    echo $lienEns.'<img src="Videotheque/Vue/images/oeil.png" width="40rem"> </a>';
                   		       }
                   		       else {
                   		           $idLecon = $sst['id_lecon'];
                   		           $accesDetail = '<button id =" detail" onclick ="detailLecon('.$idLecon.','.$ind.')";" > 
                                                <img src="Videotheque/Vue/images/acces.png" width="40rem"> </button>';
                   		           echo $accesDetail;
                   		       }                  		       
                   		?>
                   		</td>       
                	</tr>
                	<?php endforeach; ?>  
			</table>


Le code javascript
/*! Javascript spécifique IDA
*/
function detailLecon($idLecon, $ind) {
/* Instanciation d'un objet de type XMLHttpRequest
/* NB : XMLHttpRequest est un objet ActiveX ou JavaScript qui permet d'obtenir des données
	au format XML, JSON, mais aussi HTML ou encore texte simple à l'aide de requêtes HTTP. */
/* Assoctation de la variable resultat à la division
	d'affichage divisionResultat */
	alert ($ind);

	var resultat = document.getElementById("listeEns")[$ind];
	
	if (resultat == null) {
		resultat = " ";
		}
	
	if (window.XMLHttpRequest) {
		// Code pour IE7+, Firefox, Chrome, Opera, Safari
		httpRequest = new XMLHttpRequest();
	} else {
		// Code pour IE6, IE5
		httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}

/* Ouverture du fichier voitures.json via le script PHP serveurJSON.php*/
/* true : mode asynchrone -> le flux doit être disponible entièrement avant son traitement */
	$url = "detailLecon.php?code="+$idLecon;
	httpRequest.open("GET", $url, true);

	/* Définition du type de flux */
	httpRequest.setRequestHeader("Content-type", "application/json");

	/* Traitement effectué dès que le flux est disponible */
	httpRequest.onreadystatechange = function(){
		/* Test si requête terminée et test status OK */
		if (httpRequest.readyState == 4 && httpRequest.status == 200) {
			/* Affichages de contrôle */
			/*alert("responseText : " + httpRequest.responseText);*/
			/* Conversion du flux JSON en objets Javascript */
			
			var donneesJSON = JSON.parse(httpRequest.responseText);
			
			/* Initialisation de la variable resultat */
			resultat.innerHTML = "";
			/* Parcours des objets Javascript */ 
			for (var objet in donneesJSON) {
			/*	 Concaténation du résultat */
					resultat.innerHTML += "Titre video :" + donneesJSON[objet].tit_video + "<br />";
					resultat.innerHTML += "url video :" + donneesJSON[objet].URL_Youtube + "<br />";
			}
		}
	}
	$parametre = "code="+$idLecon

	/* envoi de l'identifiant leçon sélectionné à la requête XMLHttpRequest */
	httpRequest.send($parametre);
	
	/* Message affiché en attente du traitement */
	/* (récupération des données depuis le serveur) */
	resultat.innerHTML = "Attente de traitement JSON ...";

}


Merci d'avance pour votre aide

6 réponses

Messages postés
30409
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 035
Donc oui, ton ajax semble bien retourner les bonnes valeurs et ta boucle fonctionne.
Peux tu expliquer alors en quoi cela ne fonctionne pas pour toi ?

Je note quelques erreurs dans ton code html/php
Déjà, il est fortement conseillé de mettre des quotes autour de CHAQUE attribut
Donc
<td id=listeEns 

est à corriger par
<td id="listeEns" 
 


Ensuite, un ID ( comprendre IDENTIFIANT ) se doit d'être UNIQUE.
Il serait donc plus propre d'avoir un ID du genre
<td id="listeEns_<?php echo $sst['id_lecon'];?>" 


et par conséquent, dans ton JS
 var resultat = document.getElementById("listeEns_"+$idLecon);


Je précise au passage qu'il est préférable d'utiliser la syntaxe
id="listeEns_<?php echo $sst['id_lecon'];?>" 

Au lieu de
id="listeEns_<?= $sst['id_lecon'];?>" 

car bien souvent, le paramètre permettant d'utiliser les SHORT_OPEN_TAG est désactivé sur les serveurs.




Messages postés
30409
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 035
Bonjour,

Tes données sont bien renvoyées au format JSON ?

Peux tu ajouter des console.log dans ton code pour voir le contenu des différentes variables retournées dans ton appel ajax ?
A commencer par
console.log('donneesJSON ',donneesJSON);


Puis dans ta boucle
for (var objet in donneesJSON) {
  console.log('objet ',objet );

Messages postés
14
Date d'inscription
samedi 7 mars 2020
Statut
Membre
Dernière intervention
17 novembre 2020



voici le contenu reçu de la requête Json.

Je n'arrive pas à mettre des traces intéressantes dans la boucle mais je continue à persévérer
Le contenu dans la boucle

Donc à priori, je récupère bien les infos.
Messages postés
30409
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 035
ça... c'est le résultat d'un ALERT ..... moi je t'ai demandé des console.log ....
Et pour les voir, il faut, bien entendu, afficher la CONSOLE de ton navigateur. ( au passage, pour debuguer de l'ajax, je te conseille fortement d'utiliser FIREFOX ( et de penser à activer le debug XHR )
Messages postés
14
Date d'inscription
samedi 7 mars 2020
Statut
Membre
Dernière intervention
17 novembre 2020

Messages postés
30409
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2020
3 035
Tu peux montrer le code que tu as utilisé pour afficher ces infos ?
Il semble que tu n'aies pas utilisé celui que je t'ai donné....
En tout cas, je ne vois que du "text" et pas de JSON (qui devrait s'afficher en tant qu'objet et non pas en tant que string dans la console...)
Messages postés
14
Date d'inscription
samedi 7 mars 2020
Statut
Membre
Dernière intervention
17 novembre 2020

/*! Javascript spécifique IDA
*/
function detailLecon($idLecon, $ind) {
/* Instanciation d'un objet de type XMLHttpRequest
/* NB : XMLHttpRequest est un objet ActiveX ou JavaScript qui permet d'obtenir des données
 au format XML, JSON, mais aussi HTML ou encore texte simple à l'aide de requêtes HTTP. */
/* Assoctation de la variable resultat à la division
 d'affichage divisionResultat */

 var resultat = document.getElementById("listeEns")[$ind];
 
 if (resultat == null) {
  resultat = " ";
  }
 
 if (window.XMLHttpRequest) {
  // Code pour IE7+, Firefox, Chrome, Opera, Safari
  httpRequest = new XMLHttpRequest();
 } else {
  // Code pour IE6, IE5
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
 }

 
/* Ouverture du fichier voitures.json via le script PHP serveurJSON.php*/
/* true : mode asynchrone -> le flux doit être disponible entièrement avant son traitement */
 $url = "detailLecon.php?code="+$idLecon;
 httpRequest.open("GET", $url, true);

 /* Définition du type de flux */
 httpRequest.setRequestHeader("Content-type", "application/json");

 /* Traitement effectué dès que le flux est disponible */
 httpRequest.onreadystatechange = function(){
  /* Test si requête terminée et test status OK */
  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
   /* Affichages de contrôle */
    console.log("responseText : " + httpRequest.responseText);
   
    /* Conversion du flux JSON en objets Javascript */
   
   var donneesJSON = JSON.parse(httpRequest.responseText);
   console.log('donnes JSON ',donneesJSON );
   /* Initialisation de la variable resultat */
   /* Parcours des objets Javascript */ 
   for (var objet in donneesJSON) {
       console.log('objet ',objet );
       console.log('titre video', donneesJSON[objet].tit_video);
   /*  Concaténation du résultat */
     resultat.innerHTML += "Titre video :" + donneesJSON[objet].tit_video;
     resultat.innerHTML += "url video :" + donneesJSON[objet].URL_Youtube + "<br />";  
   }
  }
 }

 
 /* aucun envoi car requête de type GET XMLHttpRequest */
 httpRequest.send(null);
 
 /* Message affiché en attente du traitement */
 /* (récupération des données depuis le serveur) */
 resultat.innerHTML = "Attente de traitement JSON ...";

}


Messages postés
14
Date d'inscription
samedi 7 mars 2020
Statut
Membre
Dernière intervention
17 novembre 2020

Merci beaucoup pour ton aide JordanE.....
Ca marche.... Je commençais à m'arracher les cheveux. Je comprends la logique de l'identifiant qui doit être unique....
Bon maintenant il me reste la cosmétique à mettre en place.
sans ton aide, je n'y serai pas arrivé : je bouclais en rond..... :-)