Retour affichage d'une requete Ajax

2 pièce(s) jointe(s)

Bonjour,

Dans mon projet, j'ai de base un affichage dynamique sous forme de 'card' bootstrap d'un fichier mySQL (quand on rentre un nouveau produit, ici une salle, elle s'affiche)
A partir de çà je voudrais mettre 3 sélecteurs pour affiner les recherches
Dans mon cas ville, catégorie et capacité.

Pièce jointe 605400

Je voudrais pouvoir faire une recherche sur l un des selecteurs choisi par l'utilisateur, ou qu'il puisse les mélanger
j arrive donc à afficher le contenu du select en fonction de ma BDD.
Maintenant j ai aucun affichage (ici je n'ai fait que la partie)

et je joins mes 2 codes
le php :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<?php
include 'inc/init.inc.php';
include 'inc/functions.inc.php';
 
//code...
// Récupération des catégories 
$liste_categories = $pdo->query("SELECT DISTINCT(categorie) FROM salle ORDER BY categorie"); 
// Récupération des villes 
$liste_villes = $pdo->query("SELECT DISTINCT(ville) FROM salle ORDER BY ville");
// Récupération capacités
$liste_capacite = $pdo->query("SELECT DISTINCT(capacite) FROM salle ORDER BY capacite"); 
 
 
 
 
//  RECUPERATION DES salles EN BDD
// ----------------------------------------------------------------------
 
$liste_salle = $pdo->query("SELECT * FROM salle");
// var_dump($liste_salle);
// var_dump($liste_categories);
 
 
//   recherche par categories
 
// Récupération des salles
// if( isset($_GET['categorie']) ){
 
//     $liste_produit =$pdo->prepare("SELECT * FROM salle WHERE categorie = :categorie ORDER BY categorie,titre, ville");
//     $liste_produit->bindParam(':categorie', $_GET['categorie'], PDO::PARAM_STR);
//     $liste_produit->execute();
 
// }
// else 
// if ( isset($_GET['ville'])) {
//     $liste_produit =$pdo->prepare("SELECT * FROM salle WHERE ville = :ville ORDER BY titre");
//     $liste_produit->bindParam(':ville', $_GET['ville'], PDO::PARAM_STR);
//     $liste_produit->execute();
 
 
// }
// else { 
$liste_produit = $pdo->query("SELECT * FROM salle ORDER BY titre, ville");
// }
 
 
 
 
 
 
 
// Les affichages dans la page commencent depuis la ligne suivante
//-----------------------------------------------------------------
include 'inc/header.inc.php';
include 'inc/nav.inc.php'
 
?>
 
<main class="container">
 
    <section class="team spad">
 
        <div class="container">
            <div class="row">
 
 
                <div class="section-title mt-5">
                    <div class="row">
                        <form method="POST" action=""></form>
                        <div class="col-sm-4">
 
                            <label for="ville">
                                <h5>Ville</h5>
                            </label><br>
                            <select id="ville" class="form-control">
                                <option>Veuillez choisir une ville</option>
                                <?php
 
                                while ($ligne_ville = $liste_villes->fetch(PDO::FETCH_ASSOC)) {
                                    echo '<option value="' . $ligne_ville['ville'] . '">' . $ligne_ville['ville'] . '</option>';
                                }
                                ?>
                            </select>
 
                        </div>
 
                        <div class="col-sm-4">
                            <label for="categorie">
                                <h5>Catégorie</h5>
                            </label><br>
                            <select id="categorie" class="form-control">
                                <option>Veuillez choisir une catégorie</option>
                                <?php
 
                                    while ($ligne_categorie = $liste_categories->fetch(PDO::FETCH_ASSOC)) {
                                        echo '<option value="' . $ligne_categorie['categorie'] . '">' . $ligne_categorie['categorie'] . '</option>';
                                    }
                                ?>
 
                            </select>
                        </div>
 
                        <div class="col-sm-4">
                            <label for="capacite">
                                <h5>Capacité</h5>
                            </label><br>
                            <select id="capacite" class="form-control">
                                <option>Veuillez choisir une capacité</option>
                                <?php
 
                                    while ($ligne_capacite = $liste_capacite->fetch(PDO::FETCH_ASSOC)) {
                                        echo '<option value="' . $ligne_capacite['capacite'] . '">' . $ligne_capacite['capacite'] . '</option>';
                                    }
                                ?>
 
                            </select>
                        </div>
                        </form>
                    </div>
                </div>
 
 
                <div class="section-content">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="section-content">
                            <span>Nos salles</span>
                        </div>
                    </div>
                    <div class="row" id="affichage_salle">
 
                        <?php
                        while ($ligne = $liste_produit->fetch(PDO::FETCH_ASSOC)) {
                        ?>
                            <div class="col-lg-4 col-md-6">
                                <div class="team__item set-bg" data-setbg="<?php echo  URL . 'assets/img/' .  $ligne["photo"]; ?>">
                                    <div class="team__text">
                                        <div class="team__title">
                                            <h5><?php echo $ligne["titre"];  ?></h5>
                                            <span><?php echo $ligne['ville']; ?></span>
                                        </div>
                                        <p> <?php echo $ligne['description']; ?></p>
                                        <div class="team__social">
                                            <span><?php //echo $ligne['ville']; 
                                                    ?></span>
                                            <a href="#"><i class="fa fa-twitter"></i></a>
                                            <a href="#"><i class="fa fa-instagram"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <?php
                                echo '<a href="fiche_article.php?id_salle=' .  $ligne['id_salle'] . '" class="btn  bg-dark  text-white w-100">Fiche salle</a>'
                                ?>
 
                            </div>
                        <?php } ?>
                    </div>
                </div>
 
            </div>
        </div>
    </section>
 
</main>
 
<!-- appel du cdn jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
 
 
<script>
    // on  attend un choix de l'utilisateur sur les champ ville - categorie - capacite
 
 
    // mise en place de l'évènement change sur le select id="ville"
    document.getElementById('ville').addEventListener('change', function() {
 
        // url cible pour l'appel ajax
        let cible = 'assets/room-ajax.php';
 
        let xhttp;
 
        // Création de l'objet ajax
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
 
        // la valeur du choix utilisateur
 
        let choix_ville = document.getElementById('ville').value;
        // console.log(choix_ville);
 
        let param = 'ville=' + choix_ville;
        // console.log(param);
 
        //communication ajax
        xhttp.open('post', cible);
 
        xhttp.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
 
        // mise en place de l'évènement lié au chagement de statut
        xhttp.onreadystatechange = function() {
            if (xhttp.status == 200 && xhttp.readyState == 4) {
                // console.log(xhttp.responseText);
 
                // objet JSON :
                let reponse = JSON.parse(xhttp.responseText);
                //    console.log(reponse);
 
                // réponse obtenue dans le contenu html du champ select 
                document.getElementById('affichage_salle').innerHTML = reponse.resultat;
            }
        }
 
        // on envoie avec les parametres que l'on retrouvera dans $_POST côté php
        xhttp.send(param);
 
    });
 
document.getElementById('categorie').addEventListener('change', function() {
 
        // url cible pour l'appel ajax
        let cible = 'assets/room-ajax.php';
 
        let xhttp;
 
        // Création de l'objet ajax
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
 
        // la valeur du choix utilisateur
 
        let choix_categorie = document.getElementById('categorie').value;
        // console.log(choix_ville);
 
        let param = 'categorie=' + choix_categorie;
        // console.log(param);
 
        //communication ajax
        xhttp.open('post', cible);
 
        xhttp.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
 
        // mise en place de l'évènement lié au chagement de statut
        xhttp.onreadystatechange = function() {
            if (xhttp.status == 200 && xhttp.readyState == 4) {
                // console.log(xhttp.responseText);
 
                // objet JSON :
                let reponse = JSON.parse(xhttp.responseText);
                //    console.log(reponse);
 
                // réponse obtenue dans le contenu html du champ 
                document.getElementById('categorie').innerHTML = reponse.resultat;
            }
        }
 
        // on envoie avec les parametres que l'on retrouvera dans $_POST côté php
        xhttp.send(param);
 
    });
 
 
 
 
 
 
 
    document.getElementById('capacite').addEventListener('change', function() {
 
// url cible pour l'appel ajax
let cible = 'assets/room-ajax.php';
 
let xhttp;
 
// Création de l'objet ajax
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    xhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
 
// la valeur du choix utilisateur
 
let choix_capacite = document.getElementById('capacite').value;
// console.log(choix_ville);
 
let param = 'capacite=' + choix_capacite;
// console.log(param);
 
//communication ajax
xhttp.open('post', cible);
 
xhttp.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
 
// mise en place de l'évènement lié au chagement de statut
xhttp.onreadystatechange = function() {
    if (xhttp.status == 200 && xhttp.readyState == 4) {
        // console.log(xhttp.responseText);
 
        // objet JSON :
        let reponse = JSON.parse(xhttp.responseText);
        //    console.log(reponse);
 
         document.getElementById('capacite').innerHTML = reponse.resultat;
    }
}
 
xhttp.send(param);
 
});
 
</script>
 
 
<?php
include 'inc/footer.inc.php';
?>

et celui du fichier ajax

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
// include 'inc/init.inc.php';
 
$tabVille = array(); // contiendra la réponse que nous voulons envoyer en  fin de fichier
$tabCategorie= array();
$tabCapacite= array();
 
$tabVille['resultat'] = "";  
$tabCategorie['resultat'] = "";  
$tabCapacite['resultat'] = "";  
 
 
 
    // Connexion BDD
    $host = 'mysql:host=localhost;dbname=projetroom';
    $login = 'root';
    $password = '';
    $options = array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING,
        PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'
    );
$pdo = new PDO($host, $login, $password, $options);
 
// récupération par ville
if (isset($_POST['ville'])) {
 
    $liste_salles = $pdo->prepare("SELECT * FROM salle WHERE ville = :ville");
    $liste_salles->bindParam(':ville', $ville, PDO::PARAM_STR);
    $liste_salles->execute();
 
    // on construit les options en les plaçant dans $tab['resultat']
    while ($ligne_ville = $liste_salles->fetch(PDO::FETCH_ASSOC)) {
        if ($liste_salles->rowCount() < 1) {
            $tabVille['resultat'] .= '<p> Aucun résultat pour cette recherche</p>';
        } else {
            while ($ligne_ville = $liste_salles->fetch(PDO::FETCH_ASSOC)) {
 
                $tabVille['resultat'] .= '
                <div class="col-lg-4 col-md-6" id="affichage">
                <div class="team__item set-bg" data-setbg="img/' .  $ligne_ville["photo"];'">
                    <div class="team__text">
                        <div class="team__title">
                            <h5>' . $ligne_ville["titre"] . '</h5>
                            <span>' . $ligne_ville['ville'] .'</span>
                        </div>
                        <p> ' . $ligne_ville['description'] . '</p>
                        <div class="team__social">
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
                <a href="fiche_article.php?id_salle=' .  $ligne_ville['id_salle'] . '" class="btn  bg-dark  text-white w-100">Fiche salle</a>
                ';
                var_dump($tabVille['resultat']);
            }
        }
    }
}
 
 
 
 
 
// json_encode() permet de transformer un tableau array php en format JSON 
echo json_encode($tabVille);

Et voila un screen : Pièce jointe 605402
(pas d erreur console)

Désole du pavé
Et merci par avance de votre aide :)
Bon codage

Bonjour,

Tu utilises une variable $ville indéfinie dans le fichier d'ajax :
Code:

1 2 $liste_salles->bindParam(':ville', $ville, PDO::PARAM_STR);
Elle n'existe pas dans le fichier, non ?

1 pièce(s) jointe(s)

Merci pour la piste !
je pensais en effet que c'était la recherche avec la colonne ville dans ma bdd...
Du coup je l'ai créé dans le fichier ajax par

Code:

$ville= $_POST['ville'];

le résultat dans la console devient :Pièce jointe 605416

La je suis totalement perdu

Si tu avais ajouté ces deux lignes tout au début du fichier php, t'aurais surement vu une erreur relative à la variable $ville :
Code:

1 2 3 error_reporting(E_ALL); ini_set("display_errors", 1);
Maintenant puisque tu reçois les données, et que tu veux les exploiter en json, il faudrait supprimer var_dump($tabVille['resultat']); et garder seulement echo json_encode($tabVille['resultat']); , puis tu n'as qu'à parcourir le résultat en js avec une boucle pour extraire les lignes.

Il ne faut pas oublier aussi qu'un id doit être unique dans une page HTML, donc ceci <div class="col-lg-4 col-md-6" id="affichage"> n'est pas bon, il faudrait soit supprimer l'id soit ajouter un chiffre pour qu'ils devient uniques :
Code:

1 2 3 4 5 6 7 8 $compteur=1; while ($ligne_ville = $liste_salles->fetch(PDO::FETCH_ASSOC)) { $tabVille['resultat'] .= ' <div class="col-lg-4 col-md-6" id="affichage-'.$compteur.'">' .... $compteur++; }

Merci pour l erreur sur l'id

Je pensais l avoir déjà efface :p

j ai changé un point aussi à la place du ;

du coup pour la ville de Paris j ai l'affichage d'une seule salle (sur 2) mais pas d'image:
{,…}
resultat: "\r\n <div class=\"col-lg-4 col-md-6\">\r\n <div class=\"team__item set-bg\" data-setbg=\"img/-caroussel3.jpg\">\r\n <div class=\"team__text\">\r\n <div class=\"team__title\">\r\n <h5>Capital 8</h5>\r\n <span>Paris</span></div>\r\n <p> Open-Space de 15 bureaux en plein coeur du 8ieme arrondissement de Paris</p>\r\n\r\n </div> </div>"

mais pour une autre ville (avec une seule salle dans ma bdd) j ai aucun affichage : resultat: "" dans l onglet network du devtools

Tu veux dire l'image de l'attribut data-setbg ? si oui, il faudrait l'attribuer en js dans la boucle qui extrait les données.

oui

Pourtant elle est bien ans la boucle while avec

Code:

<div class="team__item set-bg" data-setbg="img/'. $ligne_ville["photo"].'">

Ceci est un attribut, il stock seulement le chemin et le nom de l'image, mais si tu veux qu'elle apparaisse, il faut le faire en js avec setAttribute et l'attribut src ou bien en php en ajoutant une <img /> :

Code:

1
2
3
4
5
6
7
 
$tabVille['resultat'] .= '
                <div class="col-lg-4 col-md-6">
                <div class="team__item set-bg" data-setbg="img/' .  $ligne_ville["photo"].'">
                     <img src="img/'.$ligne_ville["photo"].'" />
                     ....
           ';

1 pièce(s) jointe(s)

C'est dans un template bootstrap que j'ai récupéré
et c est vrai quand la mettant dans un <img src""> je récupère les images certes il va falloir que je m'attaque au css maintenant ^-^

Pièce jointe 605420