[AJAX] rafraichissement de DIV sous Internet Explorer 8

**Wizard50** · 31/05/2010, 12h11

Bonjour,

Voilà je vous explique mon petit problème :

J'ai un site avec une page de connexion tout à fait standard. Lorsque l'utilisateur clique sur "Connecter", ma fonction Ajax appelle une page PHP qui va voir dans un fichier XML si les identifiants saisis sont valide. Si oui, cette fonction Ajax met à jour la DIV contenant le formulaire de connexion pour afficher la page suivante.
Ce script fonctionne à merveille sous Firefox mais évidemment (sa aurait été trop beau) sa ne marche pas avec Internet Explorer 8 : quand je clique sur "Connecter", il ne se passe absolument rien, on reste sur la même page et aucune erreur JavaScript n'est détecté ...

Voici mon fichier HTML de connexion :

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
 
<html>
<head>
	<link rel='stylesheet' type='text/css' href='styles.css'>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Super-Délégué</title>
</head>
<body>
<script type="text/javascript" src="fonction.js"></script>
<noscript>Pour utiliser ce site, veuillez activer JavaScript dans les paramètres de votre navigateur. Mozilla Firefox est vivement recommandé pour l'utilisation de ce site</noscript>
<form name="etapeverif" method="post">
<div id="main">
	<div class="top"></div>
	<div class="middle">
		<div id="main_menu">
			<table style="width: 100%">
				<tr>
					<td width="3%">&nbsp;</td>
					<td>
					<img alt="Bannière" src="images/banniere.png" width="825"></td>
					<td  width="3%">&nbsp;</td>
				</tr>
			</table>
			</ br>			
		</div>
		<p>&nbsp;</p>
		<div id="submain">
				<table align="center">
					<tr align="center">
						<td width="3%">&nbsp;</td>
						<td>Login : <input id="loginConnexion" name="loginConnexion" type="text" maxlength="30"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mot de passe : <input id="passConnexion" name="passConnexion" type="password" maxlength="16" /></td>
						<td width="3%">&nbsp;</td>
					</tr>
					<tr>
						<td width="3%">&nbsp;</td>
						<td width="94%">&nbsp;</td>
						<td width="3%">&nbsp;</td>
					</tr>
					<tr align="center">
						<td width="3%">&nbsp;</td>
						<td>
							<input name="Button1" type="button" value="Valider" onclick="connexionSite();">
						</td>
						<td width="3%">&nbsp;</td>
					</tr>
				</table>
			<div id="MsgError"></div>
		</div>
	</div>
	<div class="bottom"></div>		
</div>
</form>
</body>
</html>

Voici le début de mon fichier de 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
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
 
	function getHTTPObject()
	{
		var HTTPObject = null;
		if(window.XMLHttpRequest)
		{
			HTTPObject = new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			try 
			{
				HTTPObject = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) 
			{
				HTTPObject = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			alert("Votre navigateur n'est pas compatible Ajax et le site ne pourra pas fonctionner. Mozilla Firefox est vivement recommandé pour surfer sur le web et utiliser ce site.");
			HTTPObject = false;
		}
		return HTTPObject;
	}
 
	function $(id)
	{
		return document.getElementById(id);
	}
 
	function displayPage(page)
	{
 
			requeteAjax = null;
			requeteAjax = getHTTPObject();
 
			requeteAjax.open("POST","script/affichage.php",false);
			requeteAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
 
			paramUrl = "etape="+page;
			requeteAjax.send(paramUrl);
			$('submain').innerHTML = requeteAjax.responseText;
	}
 
	function displayForm(page,url,response)
	{		
		requeteAjax = null;
		requeteAjax = new XMLHttpRequest();
		requeteAjax.open("POST","script/"+page+".php",false);
		requeteAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
 
		if ( typeof(url) != 'undefined' && url != "")
		{
			requeteAjax.send(url);
		}
		else
		{
			requeteAjax.send(null);
		}
 
		if (requeteAjax.readyState == 4 && requeteAjax.status == 200)
		{
			if ( typeof(response) != 'undefined' && response == true )
			{
				return requeteAjax.responseText;
			}
			else
			{
				return true;
			}
		}
	}
 
	function connexionSite()
	{
		login = $('loginConnexion').value;
		mdp = $('passConnexion').value;
		url = 'login='+login+'&mdp='+mdp;
		response = displayForm('connexion',url,true);
 
		if ( response == "login" || login == "" || login.length > 30 )
		{
			document.forms["etapeverif"].elements["loginConnexion"].style.border='1px solid red';
			$('MsgError').innerHTML += '<p style="color: #FF0000">Login erroné !</p><br />';
		}
		else
		{
			document.forms["etapeverif"].elements["loginConnexion"].style.border='1px solid #2A489D';
			$('MsgError').innerHTML = '';
		}
 
		if ( response == "mdp" || login == "" || login.length > 16 )
		{
			document.forms["etapeverif"].elements["passConnexion"].style.border='1px solid red';
			$('MsgError').innerHTML += '<p style="color: #FF0000">Mot de passe erroné !</p><br />';
		}
		else
		{
			document.forms["etapeverif"].elements["passConnexion"].style.border='1px solid #2A489D';
			$('MsgError').innerHTML = '';
		}
 
		if ( response == "success")
		{
			displayForm('validpage');
			displayPage('etape1');
		}
	}

Et mon fichier connexion.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
 
				if ( $login == 'LDLS')
			{		
				if ( $mdp == 'LDLS')
				{
					$libelleError = 'success';
				}
				else
				{
					$libelleError = 'mdp';
				}
			}
			else
			{
				$libelleError = 'login';
			}
			echo $libelleError;

Vous noterez que j'ai simplifié mon fichier PHP, il ne va rien charger depuis un fichier XML mais les identifiants sont dans le code même. Malgré cela sa ne marche pas

Merci de tout aide qui pourra m'être utile.
Bonne journée

**C-Real** · 08/06/2010, 12h10

Salut,

J'ai eu le même problème, ça ne fonctionne pas avec IE et <div>, il faut l'utiliser dans un <td>, par exemple <td id="myID">

**E.Bzz** · 08/06/2010, 14h00

Bonjour,

Envoyé par C-Real

J'ai eu le même problème, ça ne fonctionne pas avec IE et <div>, il faut l'utiliser dans un <td>, par exemple <td id="myID">

non, ce problème n'est absolument pas lié au type de tag HTML utilisé ...

Dans la mesure où le code semble correct, ne serait-ce pas simplement le problème de cache évoqué dans la FAQ ?

A+

[AJAX] rafraichissement de DIV sous Internet Explorer 8

AJAX

Discussions similaires

Partager

Partager