Bonjour,
J'utilise ce script avec deux listes déroulantes. Il fonctionne parfaitement avec Firefox (3.6) et Opera 11.0 mais pas sous IE 8.
Y a-t-il une modification à apporter dans la définition de la fonction getXhr()?
Bonjour,
J'utilise ce script avec deux listes déroulantes. Il fonctionne parfaitement avec Firefox (3.6) et Opera 11.0 mais pas sous IE 8.
Y a-t-il une modification à apporter dans la définition de la fonction getXhr()?
Bonjour,
Montre nous ton code.
A+.
Voici la réponse.Envoyé par socaw
Plus sérieusement, quel script ???
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum
oups... je pensais ajouter une réponse à ce message !
Il s'agit donc du script 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 <script type="text/javascript"> <!-- var xhr = null; function getXhr() { if (window.XMLHttpRequest) {// Firefox et autres xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } } /* Méthode qui sera appelée sur le click du bouton */ function go(){ getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if (xhr.readyState == 4 && xhr.status == 200) { leselect = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('a_choisir').innerHTML = leselect; document.getElementById('comparateur_a_choisir').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","ajax_trieur.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); sel = document.getElementById('trieur'); idtrieur = sel.options[sel.selectedIndex].value; xhr.send("idTrieur="+idtrieur); } // --> </script>
Re,
Ne déclare pas xhr en globale et met "var" en déclarant les variables.
Sinon, montre nous ton code HTML.
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 function getXhr() { var xhr = null; if (window.XMLHttpRequest) {// Firefox et autres xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } /* Méthode qui sera appelée sur le click du bouton */ function go(){ var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if (xhr.readyState == 4 && xhr.status == 200) { var leselect = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('a_choisir').innerHTML = leselect; document.getElementById('comparateur_a_choisir').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","ajax_trieur.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); var sel = document.getElementById('trieur'); var idtrieur = sel.options[sel.selectedIndex].value; xhr.send("idTrieur="+idtrieur); } // -->
A+.
Cette solution ne fonctionne pas sous IE 8 et ne fonctionne plus sous FF.
Voilà mon code 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
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="mef" href="test.css" /> </head> <script type="text/javascript"> <!-- var xhr = null; function getXhr() { if (window.XMLHttpRequest) {// Firefox et autres xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } } /* Méthode qui sera appelée sur le click du bouton */ function go(){ //var xhr = getXhr(); getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if (xhr.readyState == 4 && xhr.status == 200) { var leselect = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('a_choisir').innerHTML = leselect; document.getElementById('comparateur_a_choisir').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","ajax_trieur.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); var sel = document.getElementById('trieur'); var idtrieur = sel.options[sel.selectedIndex].value; xhr.send("idTrieur="+idtrieur); } // --> </script> <script type="text/javascript"> <!-- function affiche_choix() { var code_choisi = document.getElementById('a_choisir').options[document.getElementById('a_choisir').selectedIndex].text; document.getElementById('choix').value = code_choisi; } // --> </script> <body onload="go();"> <!-- en tete --> <?php include("header_test.php");?> <!-- menu --> <?php include("menu_test.php");?> <!-- corps --> <div id="corps"> <form method="post" action="traitement.php"> <!-- CODES --> <fieldset><legend>Rubriques</legend> <div id="box0"> <h4>Trieur de liste</h4> <select id="trieur" size="7" onchange="go();"> <option value="tous" selected="selected">Tous les codes</option> <option value="6">Codes 6</option> <option value="4">Codes 4</option> <option value="3">Codes 3</option> <option value="2">Codes 2</option> <option value="1">Codes 1</option> <option value="gp">Groupes</option> </select> </div> <div id="box1"> <h4>Rubrique à choisir</h4> <select id="a_choisir" name="a_choisir" size="8" onclick="affiche_choix();"> <!-- rempli par ajax --> </select> </div> <div id="box2"> <h4>Rubrique choisie</h4> <p><input type="text" id="choix" name="choix" readonly="readonly" /></p> </div> </fieldset> <!-- CRITERES --> <fieldset><legend>Critères</legend> <div id="box5"> <h4>Années</h4> <select id="liste_annees" name="annees" size="5"> <?php // connection try { $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', ''); } catch (Exception $e) { die('Erreur : ' . $e->getMessage()); } // REQUETE ANNEES $requeteAnnees = $bdd->query('SELECT Annee FROM depense GROUP BY Annee ORDER BY Annee DESC') or die(print_r($requeteAnnees->errorInfo())); while ($annees = $requeteAnnees->fetch()) { echo '<option value="'.$annees['Annee'].'">'.$annees['Annee'].'</option>'; } $requeteAnnees->closeCursor(); ?> </select> <p><input type="submit" /></p> </div> </fieldset> </form> </div> <!-- Pied de page--> <?php include("pied_test.php");?> </body> </html>
Salut,
Un select ne supporte pas innerHTML chez IE, c'est avec le div conteneur que tu dois faire un innerHTML.<select id="a_choisir" name="a_choisir" size="8" onclick="affiche_choix();">
A+.
Montre nous le code html généré, le code php appelé par la requête AJAx et le code JS actuel.
A+.
Déso de reprendre le fil de la discussion si tard...
J'ai trouvé une solution :
- Mettre le javascript dans un fichier externe et appeler ce fichier via la balise;<script>, la balise étant placée après la balise <body>;
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 <body onload="go();"> <script type="text/javascript" src="trieur.js"></script> ... </body>- Les variables du javascript ont été déclarées;
- L'événement se produit sur une balise <div> et non plus sur une balise <select>.
Merci pour vos conseils et votre temps.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager