[AJAX] rafraichissement de DIV sous Internet Explorer 8
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:
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%"> </td>
<td>
<img alt="Bannière" src="images/banniere.png" width="825"></td>
<td width="3%"> </td>
</tr>
</table>
</ br>
</div>
<p> </p>
<div id="submain">
<table align="center">
<tr align="center">
<td width="3%"> </td>
<td>Login : <input id="loginConnexion" name="loginConnexion" type="text" maxlength="30"/> Mot de passe : <input id="passConnexion" name="passConnexion" type="password" maxlength="16" /></td>
<td width="3%"> </td>
</tr>
<tr>
<td width="3%"> </td>
<td width="94%"> </td>
<td width="3%"> </td>
</tr>
<tr align="center">
<td width="3%"> </td>
<td>
<input name="Button1" type="button" value="Valider" onclick="connexionSite();">
</td>
<td width="3%"> </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:
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:
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 ;)
