[AJAX] pas d'affichage de mes champs de ajax avec internet explorer

**bachboucha** · 30/09/2009, 16h42

bonsoir
j'ai une requete de selection avec ajax
sous firefox ça marche mais avec toutes les versions de internet explorer ça marche pas
voici mon code

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
 
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;
			}
 
 
function tre(){
			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 ){
 
 
 
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('destination').innerHTML = leselect;
 
 
					}
				}
	xhr.open("POST","ajaxDest.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de palier
				//type de navette
				nav =document.getElementById('navette1').checked;
				 if (nav==true)
				 {
				var navette='2';
				}
				else
				{ var navette='1';}
 
				//type de transfert
 
 
 
 
 
				sel = document.getElementById('depart');
				iddepart = sel.options[sel.selectedIndex].value;
				xhr.send("idDepart="+iddepart+"&idNav="+navette);
 
			}

merci pour votre aide

**Bovino** · 30/09/2009, 17h59

Euh... où sont le open() et le send() ?

**bachboucha** · 01/10/2009, 12h40

voila j'ai ajouté send je l'ai oublier hier
merci de vérifier de nouveau mon code

**bachboucha** · 01/10/2009, 17h36

je suis bloqué
voici de nouveau mon code

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
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
			*/

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
function tre(){
			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 ){
 
 
 
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('destination').innerHTML = leselect;
 
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxDest.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de palier
				//type de navette
				nav =document.getElementById('navette1').checked;
				 if (nav==true)
				 {
				var navette='2';
				}
				else
				{ var navette='1';}
 
				//type de transfert
 
 
 
 
 
				sel = document.getElementById('depart');
				iddepart = sel.options[sel.selectedIndex].value;
				xhr.send("idDepart="+iddepart+"&idNav="+navette);
 
			}

j'attens votre aide

**E.Bzz** · 02/10/2009, 09h58

Bonjour,
pour pouvoir t'aider, il nous manque le code HTML concerné (le code généré, pas le PHP !).
Surtout si ça fonctionne sous FF et pas sous IE

A+

**bachboucha** · 02/10/2009, 11h32

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
<select name="depart" id="depart" onchange="tre()">
               <option value='-1'><?php echo JText::_( 'AUCUN'); ?></option>
               <?php
                                                $connect=mysql_connect("localhost","parisshu","mohammedgh71");
                                                mysql_select_db("parisshu_shuttlesarah",$connect);
                                                if ($connect)
                                                
                                                $res = mysql_query("SELECT * FROM rah_lieux ORDER BY id");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["lieu"]."</option>";
                                                }
                                        ?>
               </select>
 
              <div style="height:10px"></div>
				<div id='destination' style='font-weight:bold'>
				VERS:*<select name='destination'     id="idDest">
					<option value='-1'><?php echo JText::_( 'DESTINATION'); ?></option>
				</select>
				<br/></div>
 
				<div id='info' >
				<table name='info' border="0">
 
				</table>
				</div>

voici le code
et merci d'avance pour votre aide

**E.Bzz** · 02/10/2009, 11h41

Envoyé par E.Bzz

le code généré, pas le PHP !

**bachboucha** · 02/10/2009, 12h18

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
        echo "VERS:*<select name='destination' id='idDest' onchange='rahma()'>";
echo "<option value='0'>destination</option>";
        if(isset($_POST["idDepart"])){
                mysql_connect("localhost","parisshu","mohammedgh71");
                mysql_select_db("parisshu_shuttlesarah");
                $res = mysql_query("SELECT * FROM rah_itineraire WHERE depart=".$_POST["idDepart"]." and mode =".$_POST["idNav"]." ORDER BY id");
                while($row = mysql_fetch_assoc($res)){
                $res1=mysql_query("SELECT * FROM rah_lieux WHERE id='".$row["destination"]."' ");
                while($row1 = mysql_fetch_assoc($res1)){
                        echo "<option value='".$row1["id"]."'>".$row1["lieu"]."</option>";
                }}
        }
        echo "</select>";
        
        
?>

voici le code

**E.Bzz** · 02/10/2009, 12h30

Envoyé par bachboucha

voici le code

Heu ... je crois que l'on ne s'est pas bien compris

Dans le forum JavaScript (et HTML, CSS ....) il ne faut pas poster de code serveur (PHP, ASP).
Les problèmes résolus ici sont ceux rencontrés au niveau du navigateur. Or le navigateur ne "connait" pas (au sens où il ne le "voit" jamais) le code PHP.

La seul chose qui compte pour JavaScript et le code interprété par le navigateur, donc le code HTML.

Un code PHP peut être tout à fait correct, mais générer un code HTML erroné.

Le code que tu dois poster est celui que tu récupéres dans ton nav préféré, après chargement de la page en cause, et en utilisant la fonctionnalité (dans les menus ou via clic droit) "Afficher le code source de la page", "Afficher la source" etc. suivant le nav.

Merci

A+

**bachboucha** · 02/10/2009, 12h51

je sais pas si je vous ai compris
le code que je vais poster est celui génerer par firefox car par IE rien ne se genere que la premiere page s'affiche

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
 
<form action="index.php" method="post" name="adminForm" >
<table>
<tr><td bgcolor="#CCCCCC" style='font-weight:bold'> Remplissez le formulaire ci-dessous:</td></tr>
<tr><td bgcolor="#eceaea" style='font-weight:bold'> Type de Transfert*</td></tr>
<tr><td style='font-weight:bold'> Aller<input type="radio" value="aller" id="transfert1" name="transfert" onclick="
           { MM_showHideLayers('nav','','show');}{ MM_showHideLayers('date','','show');}{ MM_showHideLayers('date2','','none');}" onchange="rahma()";/> Aller et Retour<input type="radio" value="allerretour" id="transfert3" name="transfert" onclick="
           { MM_showHideLayers('nav','','show');}{ MM_showHideLayers('date','','show');}{ MM_showHideLayers('date2','','show');}" 
 onchange="rahma()";/></td></tr>
 
 <tr><td bgcolor="#eceaea" style='font-weight:bold'> Type de Navette*</td></tr>
    <tr><td id="nav" style='font-weight:bold'> Navette priv&eacute;e<input type="radio" value="prive" id="navette1"  name="navette" value="prive"   onclick="
           { MM_showHideLayers('dep','','show');}{ MM_showHideLayers('res','','show');}" onchange="tre()";/>
             Navette partag&eacute;<input type="radio" value="partage" id="navette2"  name="navette" value="partage" onclick="
           { MM_showHideLayers('dep','','show');}{ MM_showHideLayers('res','','show');}" onchange="tre()";/></td><td></td></tr>
 
 
 
 
<tr><td id="date" style='font-weight:bold' > Date*   <input type="text" maxLength="10" size="10" name="date_res" id="date_res" value="jj/mm/aaaa" onclick='comparerdate(document.forms["adminForm"].elements["date_res"].value)'/> 
                        <img src="/components/com_itineraire/graphics/calendar.jpg" border="0" onClick="javascript:displayCalendar('date_res', event);" id="calendarImg" alt="Modifier la date" title="Modifier la date"/>
 
                     <div id="calendar"></div></td>
                    <td id="date2" style="display:none">Date de retour*    <input type="text" maxLength="10" size="10" name="date_res2" id="date_res2" value="99/99/9999" /> 
                        <img src="/components/com_itineraire/graphics/calendar.jpg" border="0" onClick="javascript:displayCalendar('date_res2', event);" id="calendarImg" alt="Modifier la date" title="Modifier la date" onblur="verifdate()"/>
                     <div id="calendar"></div></td>
 
                    </tr>					
 
<tr ><td id="dep" style='font-weight:bold'>				
 
 
 
              DE:*&nbsp;&nbsp;&nbsp; <select name="depart" id="depart" onchange="tre()">
               <option value='-1'> D&eacute;part</option>
 
               aaaa<option value='1'>Paris</option><option value='2'>Roissy Cdg</option><option value='3'>Orly</option><option value='5'>Disneyland</option><option value='6'>Asterix</option><option value='7'>Gare du Nord</option><option value='8'>Gare de l'Est</option><option value='9'>Gare du Lyon</option><option value='10'>Gare Montparnasse</option><option value='11'>Gare d'Austerlitz</option><option value='12'>Gare St Lazare</option><option value='14'>Le Bourget</option><option value='15'>La Defense</option><option value='16'>Fontainebleau-Melun</option><option value='17'>Versailles</option><option value='18'>Chantilly</option><option value='19'>Auvers sur oise</option><option value='20'>Beauvais</option><option value='26'>Normandie</option><option value='27'>Orleans</option><option value='29'>Giverny</option><option value='30'>Chateaux de la Loire</option><option value='31'>Chartres</option><option value='32'>Deauville</option><option value='33'>Mont St Michel</option>               </select>
 
 
              <div style="height:10px"></div>
				<div id='destination' style='font-weight:bold'>
				VERS:*<select name='destination'  onchange="rahma()"   id="idDest">
					<option value='-1'> Destination</option>
				</select>
				<br/></div>
                <div id='tarification'><table ><tr><td id="tarification"></td></tr></table></div>
 
				<div id='info' >
				<table name='info' border="0">
 
				</table>
				</div>
 
 
</td>
 
 
</tr>

dans IE

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
<form action="index.php" method="post" name="adminForm" >
<table>
<tr><td bgcolor="#CCCCCC" style='font-weight:bold'> Remplissez le formulaire ci-dessous:</td></tr>
<tr><td bgcolor="#eceaea" style='font-weight:bold'> Type de Transfert*</td></tr>
<tr><td style='font-weight:bold'> Aller<input type="radio" value="aller" id="transfert1" name="transfert" onclick="
           { MM_showHideLayers('nav','','show');}{ MM_showHideLayers('date','','show');}{ MM_showHideLayers('date2','','none');}" onchange="rahma()";/> Aller et Retour<input type="radio" value="allerretour" id="transfert3" name="transfert" onclick="
           { MM_showHideLayers('nav','','show');}{ MM_showHideLayers('date','','show');}{ MM_showHideLayers('date2','','show');}" 
 onchange="rahma()";/></td></tr>
 <tr><td bgcolor="#eceaea" style='font-weight:bold'> Type de Navette*</td></tr>
    <tr><td id="nav" style='font-weight:bold'> Navette priv&eacute;e<input type="radio" value="prive" id="navette1"  name="navette" value="prive"   onclick="
           { MM_showHideLayers('dep','','show');}{ MM_showHideLayers('res','','show');}" onchange="tre()";/>
             Navette partag&eacute;<input type="radio" value="partage" id="navette2"  name="navette" value="partage" onclick="
           { MM_showHideLayers('dep','','show');}{ MM_showHideLayers('res','','show');}" onchange="tre()";/></td><td></td></tr>
 
 
 
 
<tr><td id="date" style='font-weight:bold' > Date*   <input type="text" maxLength="10" size="10" name="date_res" id="date_res" value="jj/mm/aaaa" onclick='comparerdate(document.forms["adminForm"].elements["date_res"].value)'/> 
                        <img src="/components/com_itineraire/graphics/calendar.jpg" border="0" onClick="javascript:displayCalendar('date_res', event);" id="calendarImg" alt="Modifier la date" title="Modifier la date"/>
                     <div id="calendar"></div></td>
                    <td id="date2" style="display:none">Date de retour*    <input type="text" maxLength="10" size="10" name="date_res2" id="date_res2" value="99/99/9999" /> 
                        <img src="/components/com_itineraire/graphics/calendar.jpg" border="0" onClick="javascript:displayCalendar('date_res2', event);" id="calendarImg" alt="Modifier la date" title="Modifier la date" onblur="verifdate()"/>
                     <div id="calendar"></div></td>
 
                    </tr>					
 
<tr ><td id="dep" style='font-weight:bold'>				
 
 
 
              DE:*&nbsp;&nbsp;&nbsp; <select name="depart" id="depart" onchange="tre()">
               <option value='-1'> D&eacute;part</option>
               aaaa<option value='1'>Paris</option><option value='2'>Roissy Cdg</option><option value='3'>Orly</option><option value='5'>Disneyland</option><option value='6'>Asterix</option><option value='7'>Gare du Nord</option><option value='8'>Gare de l'Est</option><option value='9'>Gare du Lyon</option><option value='10'>Gare Montparnasse</option><option value='11'>Gare d'Austerlitz</option><option value='12'>Gare St Lazare</option><option value='14'>Le Bourget</option><option value='15'>La Defense</option><option value='16'>Fontainebleau-Melun</option><option value='17'>Versailles</option><option value='18'>Chantilly</option><option value='19'>Auvers sur oise</option><option value='20'>Beauvais</option><option value='26'>Normandie</option><option value='27'>Orleans</option><option value='29'>Giverny</option><option value='30'>Chateaux de la Loire</option><option value='31'>Chartres</option><option value='32'>Deauville</option><option value='33'>Mont St Michel</option>               </select>
 
              <div style="height:10px"></div>
				<div id='destination' style='font-weight:bold'>
				VERS:*<select name='destination'  onchange="rahma()"   id="idDest">
					<option value='-1'> Destination</option>
				</select>
				<br/></div>
                <div id='tarification'><table ><tr><td id="tarification"></td></tr></table></div>
				<div id='info' >
				<table name='info' border="0">
 
				</table>
				</div>
 
 
</td>
 
 
</tr>

j'espere que j'ai compris

**E.Bzz** · 02/10/2009, 14h36

Cette fois c'est bon (plus de code PHP)

Une des choses qui peut "gêner" (= fait planter) IE, est de donner à un élément un id correspondant au name d'un autre élément.
Tu as le cas plusieurs fois dans ton code.
Un exemple parmi d'autres :

Code :

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

1
2
<div id='destination' style='font-weight:bold'>
VERS:*<select name='destination'  onchange="rahma()"   id="idDest">

Ce qui est par contre interdit dans les 2 nav, est de donner un même id à 2 éléments. Un id doit être unique dans la page.

Code :

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

<div id='tarification'><table ><tr><td id="tarification">

De manière général, essaye de faire en sorte que l'id soit le même que le name (sauf cas particuliers, comme les radio, checkbox pour lesquelles ce n'est pas toujours possible).
Ça permet d'éviter ce genre de confusion pour le navigateur.
... et pour le développeur, de s'y retrouver un peu plus facilement

Une dernière remarque, mais ce n'est qu'une supposition : les fonctions Dreamweaver (

) semblent plutôt orientées Netscape (cf. référence aux layers) : tu es sûr qu'IE a été pris en compte lors de cette étape ?

A+

**bachboucha** · 05/10/2009, 12h45

bon j'ai modifier les id de la façon que vous m'avez dis mais ça reste le meme problème
j'ai pas su quoi faire?

**andry.aime** · 06/10/2009, 11h08

Bonjour,
as tu modifié aussi le code JS?
Montre nous ton nouveau code.

**bachboucha** · 06/10/2009, 11h51

pk modifier le code js?

**andry.aime** · 06/10/2009, 12h03

Parceque tu dois appeler les éléments avec les nouveaux id si tu as modifié les id des éléments de la page après le remarque d'E.Bzz.

Ce qui est par contre interdit dans les 2 nav, est de donner un même id à 2 éléments. Un id doit être unique dans la page.

[AJAX] pas d'affichage de mes champs de ajax avec internet explorer

AJAX

Discussions similaires

Partager

Partager