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 :
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 <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è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"> </td> <td><input type="submit" value="Chercher" id="submitChercher"/></td> </tr> </table> </form>
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
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 problème est le suivant :
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 ////////////////// ?>
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 :
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
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); } }
Merci de m'avoir lu,
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;
Et surtout merci à quiconque pourra m'aider
Partager