[AJAX] Le retour d'AJAX n'est pas "actif"

**DrDam** · 27/11/2008, 07h04

Bonjour à tous...

donc pour la mise en place de mon site perso je cherche à mettre en place un bloc de log indépendant .... pour cela, lorsque un utiliateur se logue, il ne faut rafraichir que cette zone ... j'ai donc utliser de l'ajax...

Mais j'ai un problème avec les boutons régénerer par l'AJAX, en effet la mise à jour se passe bien (sur l'affichage) mes mon bouton ne s'active pas ... ....

Donc je vous post mes codes ...

le fichier getXhr.js

Code javascript :

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
 
<script language = javascript>
	var xhr = null; 
 
	//fct pour créer un objet XMLHTTPREQUEST
	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; 
		} 
	}
</script>

le fichier log.js

Code javascript :

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
 
<script language = javascript>	
/*fct qui sert à rafraîchir le bloc de log
PARAMETRES A FOURNIR : le cas de rafraichissement
1 = login
2 = logout
*/
	function log(cas)
		{
		//alert(cas);
		//on crée un objet XMLHttpRequest
		getXhr();
 
		//Sur changement d'état de l'objet xhr, 
		//on actualise la balise DIV
		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){
				retour = xhr.responseText;
 
				//alert(retour);
 
				document.getElementById('div_log').innerHTML = retour;
			}
		}
		// on appelle la page qui rafraîchit 
		//	le contenu de la balise div
 
		xhr.open("POST",'log2.php',true);
 
		// ne pas oublier le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		if(cas==1)
		{
			//login
			log = document.getElementById('zt_log').value;
			mdp = document.getElementById('zt_mdp').value;
			xhr.send('log='+log+'&mdp='+mdp);
		}
		if(cas==2)
		{
			//logout
			xhr.send('logout=1');
		}
	}
</script>

le fichier log2.php
(c'est un extrait du fichier complet ..avec le minimum qui ne fonctionne pas non plus.

Code php :

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
 
<?php session_start();
 
//*************************
//*** ctrl de connexion ***
//*************************
 
//si logout
if(isset($_POST['logout']))
{	session_unset($_SESSION['user']);    }
 
//si login
if(isset($_POST['log']) && isset($_POST['mdp']))
{	$_SESSION['user']="damien";  }
 
 
//*************************
//***     affichage     ***
//*************************
 
//si l'user est logué on propose le logout
if(isset($_SESSION["user"]))
{
	$user=$_SESSION["user"];
	echo "bienvenue $user <br />";
	echo "<input type=button value='deconnexion' id='bt_logout' name='bt_logout' onclick='log(2)'/>";
}
else // si il n'y a pas d'user logué, on propose le log ...
{
echo "<label for='zt_log'>Login</label><input type=text id='zt_log' name='zt_log' /><br />";
echo "<label for='zt_mdp'>MDP</label><input type=password id='zt_mdp' name='zt_mdp' /><br />";
echo "<input type=button value='log' id='bt_log' name='bt_log' onclick='log(1)'/>";
}
?>

et enfin le fichier tmp.php
(mon but au final c'est d'avoir un template général pour mon site
pour le moment ce fichier me sert à tester le log)

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php session_start(); ?>
<html>
	<head>
		<?php
			require('getXhr.js');
			require('log.js');
		?>
	</head>
	<body>
		<div id='div_log'>
			<?php require('log2.php'); ?>
		</div>
	</body>
</html>

voila mes 4 fichiers ... si vous pouviez les tester .... et m'expliquer pourquoi ça ne fonctionne pas (le but c'est de se logué : ca marche , et de se delogué : ca ne marche pas.)

Merci à tous

Bonne journée

DrDam

**E.Bzz** · 28/11/2008, 11h21

Bonjour,

Code :

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

document.getElementById('div_log').innerHTML = retour;

est-ce que div_log est contenu dans un <form> ?

A+

**DrDam** · 28/11/2008, 13h21

Bah non ...

Le but n'étant que de faire se régénérer qu'une petite partie de la page.
De ce fait, je n'ai pas mis un <form> car le submit me régénérerai toute la page et c'est pas le but recherché.....

**DrDam** · 28/11/2008, 13h26

peut etre que si j'explique où je veux en venir ça peut aider.

Voila prenons un exemple : "developpez.com"
tu au ptit bloc de log et lorsque tu Valide le login, tu passe par une page de confirmation ... avant de revenir sur le site avec le bloc de log qui à changé.

Mon but est que seul le bloc de logue se rafraichisse (passe de l'etat non logué à l'etat logué et inversement) sans rafraichir toute la page

**oxedet** · 30/11/2008, 21h26

Bonjour,

Il me semble que le problème vient du ...innerHtml : il n'ajoute pas les noeuds enfants dans l'arborescence du document.

Ainsi, les inputs référencés par leur ID ne sont pas vus par un getElementById... Y-a-t-il erreur javascript au moment du click sur bouton ?

**DrDam** · 01/12/2008, 09h03

. Y-a-t-il erreur javascript au moment du click sur bouton ?

sur celui qui viens d'être généré ? .... bah ... je ne sais pas vu qu'il ne se passe rien ... (même mon "alert(cas)" placé en debut de script n'affiche rien ...)
Donc j'ai presque l'impression que c'est le bouton "entier" qui n'est pas reconnu

Il me semble que le problème vient du ...innerHtml : il n'ajoute pas les noeuds enfants dans l'arborescence du document.
Ainsi, les inputs référencés par leur ID ne sont pas vus par un getElementById.

C'est l'impression que j'ai ... mon "alert(retour)" m'affche bien le code qui est retourné mais si je demande à afficher le code de la page "retourné", j'affiche le code de la premier....

C'est évident que si je ne voulais pas "ne pas régénérer tout la page" ça ne poserai pas de problème .... mais bon ....

**Saray** · 04/12/2008, 09h44

Est ce que c'est normal que tu as :
xhr.open("POST",'log.php',true);

alors que ton fichier s'appelle log2.php ?

**DrDam** · 04/12/2008, 13h34

Non ... effectivement c'est pas normal .... mais c'est juste une erreur de frappe de ma part lorsque j'ai copier le code ....

Désolé ...

Mais la bonne nouvelle : Le problème est toujours présent ...

Il me semble que le problème vient du ...innerHtml : il n'ajoute pas les noeuds enfants dans l'arborescence du document.

Il existe autre chose qui ferai la même chose (modifier le HTML contenu) ?

**E.Bzz** · 04/12/2008, 14h02

Envoyé par DrDam

Il existe autre chose qui ferai la même chose (modifier le HTML contenu) ?

Oui : les instructions DOM

A+

**Saray** · 04/12/2008, 23h06

Bon moi il y a un truc qui me perturbe depuis le début c'est les guillemets et les quotes... je mets toujours des guillemets pour les attributs d'une balise. Je ne sais pas si cela a une conséquence. Mais bon ça me perturbe

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
<?php session_start();
 
//*************************
//*** ctrl de connexion ***
//*************************
 
//si logout
if(isset($_POST['logout']))
{	session_unset($_SESSION['user']);    }
 
//si login
if(isset($_POST['log']) && isset($_POST['mdp']))
{	$_SESSION['user']="damien";  }
 
 
//*************************
//***     affichage     ***
//*************************
 
//si l'user est logué on propose le logout
if(isset($_SESSION["user"]))
{
	$user=$_SESSION["user"];
	echo "bienvenue $user <br />";
	echo '<input type=button value="deconnexion" id="bt_logout" name="bt_logout" onclick="log(2)"/>';
}
else // si il n'y a pas d'user logué, on propose le log ...
{
echo '<label for="zt_log">Login</label><input type=text id="zt_log" name="zt_log" /><br />';
echo '<label for="zt_mdp">MDP</label><input type=password id="zt_mdp" name="zt_mdp" /><br />';
echo '<input type=button value="log" id="bt_log" name="bt_log" onclick="log(1)"/>';
}
?>

**DrDam** · 05/12/2008, 09h04

Oui : les instructions DOM

je vais tester ce week-end ....

Bon moi il y a un truc qui me perturbe depuis le début c'est les guillemets et les quotes... je mets toujours des guillemets pour les attributs d'une balise. Je ne sais pas si cela a une conséquence. Mais bon ça me perturbe

j'y crois pas mais bon ... a tester aussi ..

**E.Bzz** · 05/12/2008, 09h23

Envoyé par Saray

je mets toujours des guillemets pour les attributs d'une balise. Je ne sais pas si cela a une conséquence.

Non, non : aucune conséquence.

A+

**DrDam** · 05/12/2008, 10h23

Non, non : aucune conséquence.

je pense aussi

**DrDam** · 05/12/2008, 19h13

J'ai jeter un oeil surn le DOM ...

J'ai pas bien compris comment l'appliquer à mon cas ... a vrai dire j'ai pas trouver comment afficher du HTML à la volé ...

sachant que mes pages php me renvoyent du HTML ... je ne vois pas où je modifie le contenu HTML de mon "noeud pere" ...

**Bovino** · 08/12/2008, 08h37

J'ai pas bien compris comment l'appliquer à mon cas ... a vrai dire j'ai pas trouver comment afficher du HTML à la volé ...

sachant que mes pages php me renvoyent du HTML ...

Pas tout à fait... En fait, ton script PHP écrit bien des fragments HTML, mais le responseText via Ajax reçoit lui du texte...
Pour afficher du HTML à la volée via le DOM, il faut d'abord le "construire" grâce aux méthodes createElement / createTextNode puis l'intégrer dans ta page avec différentes méthodes : appendChild, insertBefore, replaceChild...

**DrDam** · 08/12/2008, 10h38

donc si j'ai bien suivi :

mon script php génère mon code en ""HTML"" texte .
Il faut donc que mon javascript ( qui gère le retour de l'ajax) execute un """" mon_div->replaceChild(mon_texte) """ (c'est le principe ..)

le construire à la volé est assez compliqué sachant que a priori je ne connait pas le contenu remvoyé .....

**Bovino** · 08/12/2008, 10h54

Le problème qui se pose avec innerHTML est qu'il intègre mal les éléments dans le DOM en fonction des navigateurs. Dans ton cas précis, le problème essentiel est que le bouton que tu veux intégrer contient du javascript (onclick="...") qui lui n'est jamais interprété.
Une solution simple est d'intégrer ton fragment HTML comme tu le fais avec innerHTML puis d'ajouter le gestionnaire onclick sur le bouton :

Code :

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

1
2
3
4
document.getElementById('div_log').innerHTML = retour;
if(document.getElementById('bt_log')){
    document.getElementById('bt_log').onclick = function(){log(1)}
}

**DrDam** · 08/12/2008, 13h46

en gros faudrait presque que le bouton ne soit pas soumis au rafraichissement...

Ou alors ( je revient à la charge) il est pas possible d'utiliser autre chose que "inneHTML" pour un retour AJAX (modifier le contenu HTML d'une balise div) ?

Enfin ça n'explique toujours pas pourquoi le "code source" affiché "n'est pas à jour" (même avec le DOM)

**Bovino** · 08/12/2008, 14h29

Ou alors ( je revient à la charge) il est pas possible d'utiliser autre chose que "inneHTML" pour un retour AJAX (modifier le contenu HTML d'une balise div) ?

Si, mais cela t'oblige à revoir complètement ce qui te sera renvoyé par le serveur. Eventuellement, penche-toi sur le format JSON qui te permet d'envoyer des données structurées qui te permettront de créer tes éléments via le DOM plus facilement.

Enfin ça n'explique toujours pas pourquoi le "code source" affiché "n'est pas à jour" (même avec le DOM)

Parce que tu affiches le code source initial de la page, pas le code généré (via Web Developper sur FF ou DebugBar sur IE)

[AJAX] Le retour d'AJAX n'est pas "actif"

JavaScript

Discussions similaires

Partager

Partager