Discussion :

[Uscorvaxcorax]

Bonjour,
Je suis actuellement en train de travailler sur un formulaire.

Celui - ci possède deux liste déroulante, lorsque l'on choisis la première (ex:marque de voiture), la seconde affiche les modèles disponible.

J'utilise donc ajax pour mettre a jour la deuxieme liste. Cela fonctionnais lorsque j'ai écris le script en php de facon "amateur".

Je me suis mis, hier, au modèle MVC via quelques petits tutos, de facon à avoir un code plus propre et plus pro.

J'ai donc réecris mon code, mais l'ajax ne fonctionne plus... j'ai fais des recherches, matter des tutos, mais je n'ai toujours pas la réponse à mon problème.

Voici le code jquery (script.js). Si je met un alert dans un beforeSend, ca fonctionne... ce qui veut dire que l'ajax se lance bien mais ne vas pas jusqu'au success :

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
$(document).ready(function () {
    majmodele();//appel de la fonction
 
    $('#marque').on('change', function () {//chaque fois qu'on choisis une marque
        majmodele(); //appel de la fonction
    });
 
    function majmodele() { //function qui met a jour le modele de la voiture selon la marque
        var modele = $('#modele'); //recuperation de l'id de la liste des modeles
        var marque = $('#marque').val(); //recuperation de la valeur de la liste des marques
        modele.empty(); // vidage des valeurs de modele
 
        $.ajax({//appel d'ajax
            type: 'GET',
            url: 'modeles/gestion/marque.php',
            data: {marque: marque}, //envoi en get ?marque='LAMARQUE'
            dataType: 'json',
            success: function (json) { //si ca réussi execute une fonction selon paramtere envoyer par le php
                modele.append('<option value="0">Choisissez un modele</option>'); //ajoute une option par défaut
                $.each(json, function (value) { //pour chaque valeur
                    modele.append('<option value="' + value + '">' + value + '</option>'); //ajoute une option
                });
            }
        });
 
    }
});

Le php qui est lié dans l'url (marque.php)

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
<?php
 
if (isset($_GET['marque'])) { //si marque est mis en GET
    global $bdd;
    $json = array(); //creer un tableau
    $marque = htmlentities($_GET['marque']); //recup la valeur de marque
    $info_marque_voitures = $bdd->query("SELECT id_marques_voiture FROM marques_voiture WHERE nom_marque='$marque' "); //selectionne l'id de la marque selon le nom
    $info_marque_voitures_assoc = $info_marque_voitures->fetch(); //met dans un tableau
    $id_marque_voitures = $info_marque_voitures_assoc['id_marques_voiture']; //attribut l'id a une var
 
    $info_modele_voitures = $bdd->query("SELECT nom_modele FROM modeles_voiture WHERE id_marque='$id_marque_voitures' ORDER BY nom_modele"); //trouve les modeles correspondant a la marque
 
    while ($donnees_modele_voitures = $info_modele_voitures->fetch()) { //Pour chaque case du tableaux
        $json[$donnees_modele_voitures['nom_modele']] = utf8_encode($donnees_modele_voitures['nom_modele']); // ajouter au tableaux JSON une valeur = a la case
    }
    echo json_encode($json); //envoyer a l'ajax
} else {//si marque n'est pas mis en GET
    echo 'Erreur <br>'; Affiche une erreur
}

Voici une image de l'organisation du dossier. Le script est dans JS/script.js et il est inclus dans l'index.php à la racine :


Voici une capture de ce que j'ai actuellement, comme on le vois bien le champ "Modèle" a bien été vider par le script... mais après l'ajax ne vas pas jusqu'au bout :


Voici le controleur de la page :

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
<?php
 
if (empty($_SESSION['user']) && empty($_SESSION['mdp'])) { //si personne est connecté
 
    include dirname(__FILE__) . '/../../controleurs/index.php';//retour à l'accueil
 
} else if (!empty($_SESSION['user']) && !empty($_SESSION['mdp']) && isset($_SESSION['user']) && isset($_SESSION['mdp'])) {//si il y a une connexion
 
    include dirname(__FILE__) . '/../../modeles/gestion/ajout.php';//inclus le modele
 
    $marque = afficher_marque();//donne les valeurs des marques 
    $types = afficher_type();//assigne les valeurs des types
    $carburants = afficher_carburant();//assigne les valeurs des carburants
    $annees = afficher_année();
 
    include dirname(__FILE__) . '/../../vues/gestion/ajout.php';//inclus la vue
}

Le modèle :

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
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
 
<?php
 
function afficher_marque() {
    global $bdd;
 
    $marques = array();
 
    $requete_marque = $bdd->query("SELECT * FROM marques_voiture");
 
    while ($donnees = $requete_marque->fetch()) {
        $marques[] = $donnees;
    }
 
    return $marques;
}
 
function afficher_type() {
    global $bdd;
 
    $types = array();
 
    $requete_types = $bdd->query("SELECT * FROM types_voiture");
 
    while ($donnees = $requete_types->fetch()) {
        $types[] = $donnees;
    }
 
    return $types;
}
 
function afficher_carburant() {
    global $bdd;
 
    $carburants = array();
 
    $requete_carburants = $bdd->query("SELECT * FROM carburants_voiture");
 
    while ($donnees = $requete_carburants->fetch()) {
        $carburants[] = $donnees;
    }
 
    return $carburants;
}
 
function afficher_année() {
 
    $annees = array();
    $date = date('Y');
 
    for ($i = 1985; $i < $date; $i++) {
        $annees[] = $i;
    }
 
    return $annees;
}

La vue :

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
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
<h2>Ajout </h2>
 
<article id="ajout_offre" class="ajout_offre">
 
    <form action = "<?php dirname(__FILE__) . '/../../modeles/gestion/ajout.php' ?>" method = "POST" enctype="multipart/form-data">
 
        <label for = "marque"> Marque </label>
        <select name = "marque" id = "marque"> 
            <option value = "0">Choisissez une marque</option>
            <?php foreach ($marque as $m) { ?>
                <option value = "<?php echo $m['nom_marque']; ?>"><?php echo $m['nom_marque']; ?></option>
            <?php } ?>
        </select>
 
        <label for = "modele"> Modèle </label>
        <select name = "modele" id = "modele"> 
        </select>
 
        <label for = "type"> Type </label>
        <select name = "type" id = "type"> 
            <option value = "0">Choisissez un type</option>
            <?php foreach ($types as $t) { ?>
                <option value = "<?php echo $t['nom_type']; ?>"><?php echo $t['nom_type']; ?></option>
            <?php } ?>
        </select>
 
        <label for = "carburant"> Carburant </label>
        <select name = "carburant" id = "carburant"> 
            <option value = "0">Choisissez un carburant</option>
            <?php foreach ($carburants as $c) { ?>
                <option value = "<?php echo $c['nom_carburant']; ?>"><?php echo $c['nom_carburant']; ?></option>
            <?php } ?>
        </select>
 
        <label for = "annee"> Année </label>
        <select name = "annee" id = "annee"> 
            <option value = "0">Choisissez une année</option>
            <?php foreach ($annees as $a) { ?>
                <option value = "<?php echo $a; ?>"><?php echo $a; ?></option>
            <?php } ?>
 
        </select>
 
        <label for = "chevaux"> Chevaux </label>
        <input type="number" name="chevaux" id="chevaux"> 
 
        <label for = "kilometrage"> Kilométrage </label>
        <input type="number" name="kilometrage" id="kilometrage">
 
        <label for = "porte"> Porte </label>
        <input type="number" name="porte" id="porte">
 
        <label for = "prix"> Prix </label>
        <input type="number" name="prix" id="prix" <?php if (isset($_POST['prix'])) echo "value=" . $_POST['prix']; ?>>    
 
        <label for = "description"> Description </label>
        <textarea name="description" id="description" ></textarea>
 
        <input type="hidden" name="taille_max" value="10000000" />
        <input type="file" name="image[]" id="image[]" multiple="multiple" />
 
        <button type = "submit"> Ajouter une offre </button>
 
    </form>
 
</article>

Je continue mes recherches, mais si quelqu'un ici possède la solution / des conseils ou autres, je suis preneur.

Merci

[Uscorvaxcorax]

Alors...

J'ai fait quelques changement et ca fonctionne :

Tout d'abord marque.php, j'ai inclus la BDD (oui ca marche beaucoup mieux...) et j'ai utiliser try / catch :

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
<?php
 
include '../../connexion_bdd.php';
 
if (isset($_GET['marque'])) { //si marque est mis en GET
    global $bdd;
    $json = array(); //creer un tableau
    $marque = htmlentities($_GET['marque']); //recup la valeur de marque
    $modeles = array();
 
    try {
        foreach ($bdd->query("SELECT id_marques_voiture FROM marques_voiture WHERE nom_marque='$marque' ") as $donnee_marque) {//recupere l'id de la marque selon le nom
            $id_marque_voitures = $donnee_marque['id_marques_voiture']; //attribut l'id a une var
        }
        foreach ($bdd->query("SELECT nom_modele FROM modeles_voiture WHERE id_marque='$id_marque_voitures' ORDER BY nom_modele") as $donnee_modele) {//trouve les modeles correspondant a la marque
            $modeles[] = $donnee_modele; //assigne les valeurs dans un tableaux
        }
        foreach ($modeles as $info_modele_voitures) { //Pour chaque case du tableaux
            $json[$info_modele_voitures['nom_modele']] = utf8_encode($info_modele_voitures['nom_modele']); // ajouter au tableaux JSON une valeur = a la case
        }
        echo json_encode($json); //envoyer a l'ajax
    } catch (PDOException $erreur) {
        die('Erreur : ' . $erreur->getMessage());
    }
} else {
    echo 'Erreur <br>'; //affiche message erreur
}

Pour le modèle, je suis aussi passer en try/catch :

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
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
<?php
 
function afficher_marque() {
    global $bdd;
 
    $marques = array();
 
    try {
        foreach ($bdd->query("SELECT * FROM marques_voiture") as $donnees_marques) {
            $marques[] = $donnees_marques;
        }
    } catch (PDOException $erreur) {
        die('Erreur : ' . $erreur->getMessage());
    }
 
    return $marques;
}
 
function afficher_type() {
    global $bdd;
 
    $types = array();
 
    try {
        foreach ($bdd->query("SELECT * FROM types_voiture") as $donnees_types) {
            $types[] = $donnees_types;
        }
    } catch (PDOException $erreur) {
        die('Erreur : ' . $erreur->getMessage());
    }
 
 
    return $types;
}
 
function afficher_carburant() {
    global $bdd;
 
    $carburants = array();
 
    try {
        foreach ($bdd->query("SELECT * FROM carburants_voiture") as $donnees_carburants) {
            $carburants[] = $donnees_carburants;
        }
    } catch (PDOException $erreur) {
        die('Erreur : ' . $erreur->getMessage());
    }
 
    return $carburants;
}
 
function afficher_année() {
 
    $annees = array();
    $date = date('Y');
 
    for ($i = 1985; $i < $date; $i++) {
        $annees[] = $i;
    }
 
    return $annees;
}

Ensuite le script.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
26
27
28
29
30
31
32
33
34
35
$(document).ready(function () {
   // majmodele();//appel de la fonction
 
    $('#marque').on('change', function () {//chaque fois qu'on choisis une marque
        majmodele(); //appel de la fonction
    });
 
    function majmodele() { //function qui met a jour le modele de la voiture selon la marque
        var modele = $('#modele'); //recuperation de l'id de la liste des modeles
        var marque = $('#marque').val(); //recuperation de la valeur de la liste des marques
        modele.empty(); // vidage des valeurs de modele
 
        $.ajax({//appel d'ajax
            type: 'GET',
            url: 'modeles/gestion/marque.php',
            data: {marque: marque}, //envoi en get ?marque='LAMARQUE'
            dataType: 'json',
            beforeSend: function (hxr, data) {
                console.log(hxr);
                console.log(data);
            },
            success: function (json) { //si ca réussi execute une fonction selon paramtere envoyer par le php
                modele.append('<option value="0">Choisissez un modele</option>'); //ajoute une option par défaut
                $.each(json, function (value) { //pour chaque valeur
                    modele.append('<option value="' + value + '">' + value + '</option>'); //ajoute une option
                });
            }, 
            error: function (hxr, data) {
                console.log(hxr);
                console.log(data);
            }
        });
 
    }
});

Dans la console j'ai ceci :


Ce qui me donne quelque chose similaire a ceci :

[Kreepz]

Bonjour,

J'ai lu en diagonale, mais en voyant ton GIF je me demandais si tu avais fais un contrôle lorsque la valeur de marque = 0?

[Uscorvaxcorax]

Je suis dessus x) je suis aussi en train de reflechir au fonctionnement de la validation et l'envoi d'un formulaire en mvc ^^"

[Kreepz]

Je suis dessus x) je suis aussi en train de reflechir au fonctionnement de la validation et l'envoi d'un formulaire en mvc ^^"

Vu que si tu clique sur "Choisissez une marque", ta requête va être :

Code :

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

SELECT id_marques_voiture FROM marques_voiture WHERE nom_marque= 0

Et je pense qu'elle ne te renverra pas de modèle ^^

Donc si quand tu recupère la valeur de marque tu fais un contrôle dessus:

Si c'est égal à 0 tu rempli modèle avec seulement "Choisissez un modèle" et si c'est différent de 0 tu rempli normalement.

[Uscorvaxcorax]

J'ai juste fait un changement dans le js et voici ce que ca donne, il ne me reste plus qu'a trouvé un moyen pour l'autocompletion du modèle et je pense que ce sera bon :


Le script :

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
30
31
32
33
34
35
$(document).ready(function () {
    majmodele();//appel de la fonction
 
    $('#marque').on('change', function () {//chaque fois qu'on choisis une marque
        majmodele(); //appel de la fonction
    });
 
    function majmodele() { //function qui met a jour le modele de la voiture selon la marque
        var modele = $('#modele'); //recuperation de l'id de la liste des modeles
        var marque = $('#marque').val(); //recuperation de la valeur de la liste des marques
        modele.empty(); // vidage des valeurs de modele
        modele.append('<option value="0">Choisissez un modele</option>'); //ajoute une option par défaut
 
        $.ajax({//appel d'ajax
            type: 'GET',
            url: 'modeles/gestion/marque.php',
            data: {marque: marque}, //envoi en get ?marque='LAMARQUE'
            dataType: 'json',
            beforeSend: function (hxr, data) {
                console.log(hxr);
                console.log(data);
            },
            success: function (json) { //si ca réussi execute une fonction selon paramtere envoyer par le php
                $.each(json, function (value) { //pour chaque valeur
                    modele.append('<option value="' + value + '">' + value + '</option>'); //ajoute une option
                });
            },
            error: function (hxr, data) {
                console.log(hxr);
                console.log(data);
            }
        });
 
    }
});

[Kreepz]

Ton problème est donc résolu?

[Uscorvaxcorax]

Oui, je le met en résolu ^^ Merci