Résultat apparaît dans la console mais pas sur la page

**dede_bo** · 10/10/2021, 23h23

Bonjour à tous,

J'essaie d'apprendre l'Ajax ... donc, je rame un peu.

Je suis occupé à faire une page Web contenant une liste de marque et quand j'en choisi une (clique sur un bouton 'edit'), j'aimerais faire un appel Ajax pour charger et afficher les détails de cette marque.

Voici le code de la page principale:

Code html :

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
<!DOCTYPE html>
<html lang="en">
    <head>
		<title>Exemple</title>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
		<meta content="utf-8"                   http-equiv="encoding">
 
        <!-- Librairie JS -->
		<script src="resources/js/jquery-3.4.1.js"                  type="text/javascript" ></script> 
                <script src="resources/js/jquery-ui-1.12.1/jquery-ui.js"    type="text/javascript" ></script>
		<script src="resources/bootstrap-5.02/js/bootstrap.min.js"  type="text/javascript" ></script>
		<script src="resources/js/ajax.js"                          type="text/javascript" ></script>
		<script src="resources/js/general.js"                       type="text/javascript" ></script>
		<script src="resources/js/marque_JQuery.js"                 type="text/javascript" ></script>
 
		<!-- Librairie CSS -->
		<link rel="stylesheet" href="resources/js/jquery-ui-1.12.1/jquery-ui.css">
		<link rel="stylesheet" href="resources/bootstrap-5.02/css/bootstrap.min.css" >
		<link rel="stylesheet" href="resources/css/color.css" >
		<link rel="stylesheet" href="resources/css/table.css" >
	</head>
	<body style='background-color: beige'>
 
		<div class="container-fluid " role="main">
 
			<!-- Le div ci-dessous est le bloc où j'aimerais afficher le résultat d'Ajax -->
			<div id="detail-marque" ></div>
 
			<!-- Affichage de la liste des marques -->
			<?php include("listeMarques.php"); ?>
		</div>
    </body>
</html>

Ensuite, voici le code pour Ajax (librairie : marque_JQuery.js)

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
jQuery(document).ready(function(){
 
		/* Transfer data for edition */
 
		var xhr = getXhr();
 
		xhr.onreadystatechange = function(){
			var reponse = "";
 
			if(xhr.readyState == 4 && xhr.status == 200){
				reponse = xhr.responseText;
				jQuery("#detail-marque").insertAfter(reponse); // <=== AFFICHAGE RETOUR AJAX ===
			}
		}
 
		xhr.open("POST","detailMarques.php",false);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		/* Dans le cas où j'ouvre le page, aucune marque n'est sélectionnée. 
                    Donc, le champ "Form_MarqueID" n'existe pas. 
                    Je le force à 0 pour afficher une page avec les champs vide */
 
		if (!document.getElementById('Form-MarqueID')){
			xhr.send("MarqueID=" + 0);			
		}

Pour terminer, voici le code qui génère le bloc dynamiquement

Code php :

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
46
47
48
			<?php 
			       /* dans le cas où je dois afficher la page vide (marqueID = 0), je vide les champs */
				$marque   = "";
				$pays     = "";
				$annee    = "";
				$taille   = "";
				$guide    = "";
				$remarque = "";
				$multi    = "";
 
                                /* Si je choisi une marque, l'ID est passé en paramètre */
 
				if (isset($_POST["MarqueID"])){
 
					include("connexion.php");
 
					// extrait les données
 
					$sql = "SELECT m.marque_id as id, m.marque_nom as marque, m.marque_annee as annee, m.marque_pays as pays, m.marque_taille as taille,\n"
						 . "       m.marque_guide_taille as guide, m.marque_remarques as remarque, m.marque_multi as multi\n"
						 . "  FROM marques as m \n"
						 . " WHERE m.marque_id = " . $_POST["MarqueID"] . ";";
 
					$result = $mysqli->query($sql);
 
					if (!$result) {
						trigger_error('Invalid query: ' . $mysqli->error);
					}
 
					$qt     = $result->num_rows;
					$mysqli->close();
 
					if($result){
						if ($result->num_rows > 0) {
 
							// Affichage des données
 
							while($row = $result->fetch_assoc()) {
								$marque   = utf8_encode($row['marque']);
								$pays     = utf8_encode($row['pays']);
								$annee    = $row['annee'];
								$taille   = utf8_encode($row['taille']);
								$guide    = utf8_encode($row['guide']);
								$remarque = utf8_encode($row['remarque']);
								$multi    = utf8_encode($row['multi']);								
							}
 
Le code qui suit est tout le HTML ( Bootstrap) pour afficher

Voilà. Quand le code s'exécute, je n'ai aucune erreur. Mais rien est affiché.
Par contre, si j'ouvre la console, je vois le résultat correctement formaté !
Cela fait plusieurs jours que je m'arrache les cheveux. Mais je ne trouve pas mon erreur.

Y aurais-t'il un parmi vous qui vois une erreur ?
Je ne sais plus où chercher !

Merci de votre aide
Andre

**dede_bo** · 11/10/2021, 11h51

Bonjour à tous,

J'ai trouvé la solution:

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
		/* Transfert des informations pour l'édition */
 
		var xhr = getXhr();
		var url = "detailMarques.php";
 
		xhr.onreadystatechange = function(){
			var reponse = "";
 
			if(xhr.readyState == 4 && xhr.status == 200){
				reponse = xhr.responseText;
 
                                // Voici l'instruction originale:
                                //jQuery("#detail-marque").insertAfter(reponse);
 
                                // voici la bonne réponse
				document.getElementById('detail-marque').innerHTML = reponse;
                                // Cela à fonctionné du premier coup
 
			}
		}
 
		// https://macollection/marque/editionmarques.php
 
		xhr.open("POST",url,false);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');		
 
		if (!document.getElementById('Form-MarqueID')){
			xhr.send("MarqueID=" + 0);			
		}

C'est l'instruction JQuery qu'il n'aime pas.
Est arrivé un second problème ... Les boutons ne voulaient plus fonctionné
Les évenements ont disparus

Code :

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

1
2
3
4
5
6
7
8
9
// Au départ, j'ai écris cette phrase
jQuery("#detail-marque").click(function(){
 
// Après l'exécution de l'Ajax, j'avais beau cliquer sur le bouton ... plus rien
// J'ai du changer la ligne de code par:
 
jQuery("#detail-marque").on( "click", "#bt_clear", function() {
 
// Et comme cela, tout fonctionne bien !

Voilà,
Je partage avec vous mes trouvailles car, je pense de ne pas être seul dans cette situation !
Bonne journée

André

**SpaceFrog** · 14/10/2021, 08h23

document.getElementById('detail-marque').innerHTML = reponse;

Normal tu as écrasé les éléments du DOM auxquels tu avais attribué les évènements ...

Deux solutions:
Soit tu affectes tes évènement par délégation à parti du parent (voir on avec trois paramètres ou delegate)
Soit tu réaffectes tes événements après avoie écrasé ton innerHMLT

**dede_bo** · 14/10/2021, 08h29

Bonjour,

Merci de vos conseils.

Pour information, la discussion est clôturée ...

Bonne journée
André

Résultat apparaît dans la console mais pas sur la page [AJAX]

jQuery

Discussions similaires

Partager

Partager