Résultat apparaît dans la console mais pas sur la page
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:
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:
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:
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
