Discussion :

[Bleys]

Bonjour à tous,

J'ai un formulaire contenant trois select
En fonction du choix sur le deuxième, le contenu du dernier est modifié via une requete AJAX + un peu de javascript.

Voici mon codage :

Fichier HTML contenant le formulaire :

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
 
<tr>
                <td><label for="marque">Marque </label></td>
                <td class="celluleBlanche"></td>
                <td>
                    <select id="marque" onchange="ChargerModeles(this.value)" onkeyup="ChargerModeles(this.value)">
                        <option selected="selected" value="-1">Toutes</option>
                        <!-- BEGIN marque -->
                            <option value="{marque.VALEUR}" >{marque.TEXTE}</option>
                        <!-- END marque -->
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="modele">Mod&egrave;le </label></td>
                <td class="celluleBlanche"></td>
                <td>
                    <select id="modele" >
                        <option selected="selected" value="-1">Tous</option>
                        <!-- BEGIN modele -->
                            <option value="{modele.VALEUR}" >{modele.TEXTE}</option>
                        <!-- END modele -->
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td><input type="submit" value="Chercher" id="submitChercher"/></td>
            </tr>
        </table>
    </form>

Fonction javascript appelée :

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
 
function ChargerModeles(unIdMarque)
// Rôle :
//    Cette méthode se charge de récupérer l'ensemble
// des modèles de la marque dont l'id est <unIdMarque>
// via une requête AJAX.
//    L'ensemble des modèles trouvés sont ajoutés au select 
// de la page courante ayant pour id "modele".
//    Si aucun modèle n'a été trouvé, une seule option composera
// le select : "Aucun Modele Trouvé" et désactivera le bouton d'id
// "submitChercher" de la page courante.
//
// Contrat :
//    Aucun
//
// Algorithme :
//    Trivial
//
{
    var selectModele = document.getElementById('modele');    // Sélectionne le select où seront ajoutés les OPTIONS
 
    // Vidage du select : toutes les options sont supprimées
    if ($.browser.opera)
    { // Pour opéra, l'effacement est un peu différent
        while(selectModele.length != 0)
        {
            selectModele.options[selectModele.length-1] = null;
        }
    }
    else
    { // Pour les autres navigateurs il n'y a pas de problème
        selectModele.length = 0;
    }
 
    if ( unIdMarque != -1 )
    {
        // Utilisation du framework jQuery pour la requête AJAX
        $.ajax({
            type: 'POST',                            // Méthode post
            url: './Includes/chargerModeles.php',    // Fichier appelé
            data: 'idMarque='+unIdMarque,            // Paramètres du post
            success: function(modeles)                // Fonction appelée une fois la requête terminée
                    {
                        if ( $(modeles).find("reponse").find("modele").length != 0 )
                        { // Il y a au moins un modèle
                            selectModele.options[selectModele.options.length] = new Option("Tous","-1");
                            $(modeles).find("reponse").find("modele").each(function()
                            {
                                selectModele.options[selectModele.length] = new Option($(this).find("nom").text(),$(this).find("id").text());
                            });
                            document.getElementById('submitChercher').disabled = false;
                        }
                        else
                        { // On a trouvé aucun modèle
                            selectModele.options[selectModele.length] = new Option("Aucun modele trouve","-1");
                            document.getElementById('submitChercher').disabled = true;
                        }
                    }
        });
    }
    else
    { // L'utilisateur a sélectionné l'option Toutes dans les marques
        selectModele.options[selectModele.length] = new Option("Tous","-1");
        document.getElementById('submitChercher').disabled = false;
    }
} // --- Fin de ChargerModeles()

Le fichier php appelé lors de la requête AJAX :

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
 
<?php
    ///////////////////////////////////////////////////////////////
    // Rôle de ce fichier :
    //    Le contenu de ce fichier sert lors des requêtes AJAX pour 
    // récupérer tous les modèles de la base de données d'une marque donnée
    // L'id de cette marque est envoyé lors de l'appel AJAX sous le nom
    // idMarque
    //
    //    Renvoi une chaine au format XML encadrée par la balise <reponse></reponse>
    // Si le résultat est vide, la chaine ne contient que ces balises.
    // Sinon pour chaque modele  trouvé la structure suivante est ajoutée à la balise
    // précédente :
    //    <modele>
    //        <id> ID DU MODELE </id>
    //        <nom> NOM DU MODELE </nom>
    //    </modele>
    //
    // Contrat :
    //    Ce fichier n'est à utiliser que dans un contexte AJAX.
    //
    // Algorithme : 
    //    Trivial
    //
    //////////////////////////////////////////////////////////////
 
 
    /////////////////////////////////////// Include des fichiers nécessaires
    require_once('Config.php');
    require_once('../'.REP_CLASSES.'/Voiture.php');    // Contient la méthode ListerModeles
 
    /////////////////////////////////////// Initialisation de l'accès à la base de données
    $baseDonnees = new PDO(BDD_CONNEXION,BDD_UTILISATEUR,BDD_MOT_DE_PASSE);
 
    ////////////////////////////////////// Récupération des modèles
    $modeles = Voiture::ListerModeles($baseDonnees,$_REQUEST['idMarque']);
 
    ///////////////////////////////////// Formatage du résultat
    $retour = '<reponse>';
    if (count($modeles)!=0)
    {
        foreach($modeles as $unModele)
        {
            $retour .= '<modele>';
            $retour .= '<id>'.$unModele['IdModele'].'</id>';
            $retour .= '<nom>'.$unModele['NomModele'].'</nom>';
            $retour .= '</modele>';
        }
    }
 
    $retour .= '</reponse>';
    $baseDonnees = null;
    header('Content-type: text/xml');
    echo $retour;
///////////////////
// Ne surtout pas insérer de caractère après la balise fermante php sous peine de non fonctionnement
//////////////////
?>

Le problème est le suivant :
Admettons je choisisse dans le second select un premier choix qui implique que mon dernier select soit modifié.
Si à nouveau je remodifie mon choix du second select de sorte que mon dernier select soit modifié avec une seule Option (affichage du message Tous ou Aucun modele trouve selon le code fourni ci-dessus). La réaction diffère entre Firefox et IE 7 :

Firefox : ça marche y'a pas de soucis.
IE7 : il plante complètement sans message d'erreur sans rien (uniquement le dialogBox de Vista où il y a écrit : Explorer à terminé)

Je suis sous VISTA (on sait jamais si ça peut jouer).

Ce qui me parait bizarre aussi c'est que j'avais déjà fais ça de la façon suivante et que ça marchait sans soucis ... sauf que cette méthode était très très mal codée, alors que là c'est normalement beaucoup plus propre ...
Ancienne méthode (fonctionnelle) Fonction Javascript :

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
 
function load_Modele(form)
{
 
     var l1 = document.getElementById('marque');
     var l2 = document.getElementById('modele');
     var index = l1.selectedIndex;
     var valeur = l1.options[index].value;
 
     if (valeur<0) 
     {    //re-affichage du message "selectionner une marque"
        l2.options.length = 0;
 
        if (form == 'voiture')
        {
            l2.options[0] = new Option("Selectionner une marque","-1");
            load_Details('div_infovoit','marque','modele','categorie','text_modele');
        }
        else
        {
            l2.options[0] = new Option("Toutes","-1");
        }
     }
     else
     {    //mise en place de l'objet pour XMLHttpRequest
        var xhr_object = null;
 
        // Firefox 
        if(window.XMLHttpRequest) 
            xhr_object = new XMLHttpRequest();
        // Internet Explorer 
        else if(window.ActiveXObject) 
              xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
        // XMLHttpRequest non supporté par le navigateur 
        else {
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...Le site ne peut donc fonctionner correctement. Veuillez utiliser un autre navigateur."); 
            return; 
        }
 
 
 
        xhr_object.open("POST", "./includes/modele.php", true);
        xhr_object.onreadystatechange = function() 
        { 
            if(xhr_object.readyState == 4)
            {
                //on interprete maitnenant les commandes javascript pour que l'ajout se fasse reellement
                eval(xhr_object.responseText); 
            }
        }
 
        xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        //on stocke les donnees saisie par l'utilisateur (marque modele) qui seront utiles dans modele.php. Les donnees sont envoyees via xhr_object.send();
        var data = "id_marque="+valeur+"&form="+form+"&l_modele=modele";
        xhr_object.send(data);
     }
}

Ancienne méthode (fonctionnelle) fichier php appelé :

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
 
//traitement SQL
    $db = new PDO(BDD_CONNECTION, "root", "");
    $sql='SELECT Id_Modele,Nom FROM modeles WHERE Id_Marque=:id_marque ORDER BY Nom ASC';
    $statement = $db->prepare($sql);
    $statement->execute(array(':id_marque' => intval($_POST["id_marque"])));
    $tabl_results = $statement->fetchAll();
 
    //Gestion de la liste
    echo 'var liste = document.getElementById("'.$_POST["l_modele"].'");';
    echo 'liste.options.length=0;';
 
    //si notre requete n'est pas vide on crée nos options
    if (count($tabl_results))
    {
        if ($_POST["form"]=="voiture")    // page d'ajout de voiture
        {
            echo 'liste.options[liste.options.length] = new Option("Choisissez un modele","-1");';
        }
        else                            //page de recherche dans le stock 
        {
            echo 'liste.options[liste.options.length] = new Option("Tous","-1");';
        }
 
        foreach($tabl_results as $map)
        {
            echo 'liste.options[liste.options.length] = new Option("'.$map["Nom"].'",'.$map["Id_Modele"].');';
        }
    }
    //sinon on ne met qu'une seule option correspondant à un message de vide
    else
    {
        echo 'liste.options[liste.options.length] = new Option("Aucun modele correspondant","-1");';        
    }
    echo 'load_Details("div_infovoit","marque","modele","categorie","text_modele");';
    $statement = null;
    $db = null;

Merci de m'avoir lu,
Et surtout merci à quiconque pourra m'aider