redirection après requête AJAX
Bonjour tout le monde
Je viens vers vous car je tombe sur un souci, j'utilise en grande partie ajax ( sans framework ) et j'ai besoin de faire une redirection après une identification utilisateur ( login )
Contexte :
lors d'un clic, un div est affiché en position absolu lui même allant chercher le formulaire d'identification ( login, password ), j'utilise ajax pour envoyer ce formulaire ( login.php ), qui renvoi un message de confirmation ou d'erreur, si identification confirmer renvoi "Vous êtes maintenant identifier" sinon retourne l'erreur
Si confirmation j'aimerai rediriger l'utilisateur ver la page membre, pour ce faire j'inclus un script JS dans le retour
Sinon il affiche l'erreur et réafiche le formulaire d'identification
Le code :
requête ajax (xhr.js)
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
|
// fonction simplifiant la création d'un objet XMLHttpRequest
// Compatible IE et GECKO
function Xhr(){
// Mozilla/Safari
if(window.XMLHttpRequest){ return new XMLHttpRequest(); }
// IE
else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); }
// Erreur
else{
alert('Votre navigateur ne supporte pas XHR, veuillez activer Javascript dans les options de votre navigateur');
}
}
// Fonction qui va envoyer une requête serveur vers le fichier ciblé,
// récupérer le retour et l'ecrire dans la cible
function getXhr(fichier,string,DivId){
// On cible le div contenaire
var Cible = document.getElementById(DivId);
// On insère une image en guise de chargement
Cible.innerHTML = '<div id="load" style="display:block;width:150px;margin:20px auto;text-align:center;">Chargement en cours</div>';
// On crée le nouvel objet XMLHttpRequest
var NewSelf = Xhr();
// On ouvre une requete avec la méthode POST vers le fichier ciblé
NewSelf.open('POST',fichier, true);
// On déclare le header pour l'envoi via POST ( pseudo formulaire )
NewSelf.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// On définit la fonction de procédure pour la réponse
NewSelf.onreadystatechange = function() {
// Si le statut de la requête est égal à 4
if(NewSelf.readyState == 4) {
// On masque l'image du chargement
document.getElementById('load').style.display = 'none';
// On écris le résultat de la requete dans le div ciblé
var retour = NewSelf.responseText;
Cible.innerHTML = NewSelf.responseText;
}
};
// Et on envoi la requête, avec paramètre ( string = liste des variables )
NewSelf.send(string);
}
function sendLogin(){
var login = document.getElementById('minLog').value;
var passw = document.getElementById('minPass').value;
getXhr('index.php','page=User&epage=login&ajax=1&login='+login+'&passw='+passw,'formSpeed');
} |
le bouton d'envoi du formulaire sur le formulaire login
Code:
1 2
|
echo '<input type="button" id="sendForm" value="Envoyer" onclick="sendLogin();" />'; |
le fichier login.php
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
|
if(isset($_POST['ajax'])){
$close = "<img src=\"Img/forms/close.png\" alt=\"Fermer\" style=\"float:right;margin-top:-5px;cursor:pointer;\" onclick=\"hideEl('formSpeed');\" onmouseover=\"this.src='Img/forms/closeF.png';\" onmouseout=\"this.src='Img/forms/close.png';\" />";
openForm($close . "Identification");
//echo $_POST['login'] . " = " . $_POST['passw'];
if(isset($_POST['login']) && isset($_POST['passw'])){
$check = $user->login($_POST['login'],$_POST['passw']);
if($check == 1){
echo utf8_encode("Vous êtes maintenant identifier");
unset($_SESSION['user']);
$_SESSION['user'] = $user;
// ICI LA REDIRECTION
redirect('Member.php',2);
}
else{
if($check == 0){ echo utf8_encode("Identifiant ou mot de passe incorrect"); }
elseif($check == 2){ echo utf8_encode("Vous n'avez pas valider votre inscription"); }
else{ echo utf8_encode("Vous devez remplir vos informations personnelles"); }
}
}
else{
echo utf8_encode("Vous n'avez pas fournit vos identifiant");
}
closeForm();
if($check <> 1){
include('Mods/User/minLog.inc.php');
}
}
else{
echo "Erreur";
} |
et enfin la fonction redirect() PHP
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13
|
function redirect($url, $tps){
$temps = $tps * 1000;
echo "<script type=\"text/javascript\">\n"
. "\n"
. "function redirected(){\n"
. "window.location = '" . $url . "';\n"
. "}\n"
. "setTimeout('redirected()','" . $temps ."');\n"
. "\n"
. "</script>\n";
} |
Le problème : L'identification fonctionne très bien ( j'ai bien le message de confirmation qui s'affiche, un var_dump de l'objet $user dans le message de retour me retourne bien les information membre, je suis donc bien identifier )
mais voilà aucune redirection ne se produit et je n'arrive pas à comprendre d'ou viens le problème
j'ai essayer avec
- window.location.href
- window.location.replace()
Mais toujours aucune redirection, plusieur personne m'ont recommander d'utiliser un framework comme "JQuery" et autres en m'argumentant "pourquoi réinventer la roue", mais mon but est justement de comprendre le rouage et pas simplement l'utilisé, certe c'est réinventer la roue mais c'est à titre instructif ce qui me semble être un très bon arguments, m'enfin là je sèche
J'ai essayer de déboguer avec l'outil firebug de FF, et il ne me retourne aucune erreur javascript, dans le tracage de la requête ajax, le retour me retourne bien le message de confirmation et le script JS avec la bonne URL de redirection. Idem lors de l'inspection des élément le script JS est bien présent dans la source, je ne voi donc vraiment pas pourquoi ca ne marche pas
La source (valeur de retour de la requête ajax fournie par firebug) :
Code:
1 2 3 4 5 6 7 8
|
Vous êtes maintenant identifier
<script type="text/javascript">
function redirected(){
window.location = 'Member.php';
}
setTimeout('redirected()','2000');
</script> |
d'avance merci de votre aide, et désolé du roman mais je pense qu'il vaut mieux bien expliquer dès le début.
Cordialement
EDIT : J'ai essayer de mettre un simple alert(); et l'alerte n'est pas déclenchée non plus donc je pense je doit faire une grosse erreur quelque part, pourtant présent de la source et toujours aucunes erreur JS
function redirect()
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
function redirect($url, $tps){
$temps = $tps * 1000;
echo "<script type=\"text/javascript\">\n"
. "\n"
. "function redirected(){\n"
. "window.location = '" . $url . "';\n"
. "alert('tu va être rediriger vers : " . $url . "');\n"
. "}\n"
. "setTimeout('redirected()'," . $temps .");\n"
. "\n"
. "</script>\n";
} |