Retour affichage d'une requete Ajax

**Jweb60** · 25/09/2021, 13h34

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é.

Nom : chrome_vicOelC37X.png
Affichages : 599
Taille : 1,27 Mo

Nom : chrome_vicOelC37X.png
Affichages : 599
Taille : 1,27 Mo

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 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
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 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
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 : Nom : chrome_Vpe3vb2Y3q.png
Affichages : 594
Taille : 442,1 Ko

(pas d erreur console)

Désole du pavé
Et merci par avance de votre aide

Bon codage

**Toufik83** · 25/09/2021, 15h27

Bonjour,

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

Code php :

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

1
2
 
$liste_salles->bindParam(':ville', $ville, PDO::PARAM_STR);

Elle n'existe pas dans le fichier, non ?

**Jweb60** · 25/09/2021, 15h59

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 :

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

   $ville= $_POST['ville'];

le résultat dans la console devient : Nom : chrome_dTZfWiEyMg.png
Affichages : 532
Taille : 9,8 Ko

La je suis totalement perdu

**Toufik83** · 25/09/2021, 16h17

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 php :

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

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 php :

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

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++;
 }

**Jweb60** · 25/09/2021, 16h58

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

**Toufik83** · 25/09/2021, 17h27

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.

Retour affichage d'une requete Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager