[AJAX] Fermeture Div et ouverture d'une autre div

Version imprimable

Bonjour,

je suis entrain de mettre en place une authentification en ajax sur mon espace membre ,

j'ai donc la page connect.js qui contient tout le javascript qui permet la connection au serveur

et ma page login qui contient le formulaire

j'ai essayer de mettre un hidden sur mon div du formulaire, et un visible sur mon div de connection une fois connecté , mon probleme et qu'il ferme le premier div mais n'ouvre pas le second !

Voila les pages sources :

Connect.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
function maFonctionAjax(email, mdp)
{
  var MonAjax;
  if (window.XMLHttpRequest) MonAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) MonAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  MonAjax.open('POST',"connect.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
               if (MonAjax.responseText == "true") { 
 
 
  document.getElementById('LeRetour').innerHTML='';
 document.getElementById("login-off").style.visibility = "hidden";
 
 
 
} else {                             
 
 document.getElementById('LeRetour').innerHTML='<font color=RED>'+MonAjax.responseText+'</font>';
 document.getElementById("login-on").style.visibility = "visible";
 
 
 
 
}
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('email='+email+'&mdp='+mdp);
}

et ma page 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
<?
session_start();
?>
<SCRIPT language=JavaScript src="js/connect.js"></SCRIPT>
 
 
 
<div id="LeRetour">
<?
include("mysqlcon.php"); 
include("recuperation.php");
?>
<div id="login-on" style="visibility: hidden;">
<img src="/images/profil.jpg" style="float:left;" width="50" height="50"<> <b><? echo $pseudocon; ?></b> - <a href="/page.php?mod=deco">Déconnection</a><br>
<br>
<b><a href="/page.php?mod=gestblog" rel="facebox">Gere ton blog</b></a> - <a href="/page.php?mod=gestprofil">Gere Ton Profil</a>
</div>
 
<div id="login-off" style="visibility: visible;">
<form method="post"  onsubmit="maFonctionAjax(this.email.value,this.mdp.value);return false" action="">
Email   <input name="email" id="email"  type="text" /><br />
MDP :  <input name="mdp" id="mdp"  type="password" /><br />
<br /><br />
<input type="submit"  value="envoyer"  /><br />
</form>
</div>
</div>
</body></html>

Où Comment puis je faire pour faire une actualisation de ma div seulement juste une actualisation ?

20/10/2010, 20h07
supersnail

Bonjour,

Tu as remarqué que tes deux div sont dans ton grand div LeRetour?

Sauf, que dans ton code, tu remplaces le contenu de ce div par ton retour, ce qui fait que tout ce qui s'y trouvait avant (login-on et login-off) n'existent plus lorsque tu veux les afficher/cacher ;)
20/10/2010, 20h17
toulousain3117

et donc en fait je doit mettre
div login-on
div login-off

et
div leretour

?

// Edit, je viens de faire le test et sa marche pas non plus

Bonsoir,

Utilise display:none et display:block pour les div. Tu ne fais que cacher l'unmais tu n'affiches pas l'autre.
Code:

1 2 3 4 5 if (MonAjax.responseText == "true") { document.getElementById('LeRetour').innerHTML=''; document.getElementById("login-off").style.display= "none"; document.getElementById("login-on").style.display= "block"; }else...
Code:

<div id="login-on" style="display: none;">

PS: Nettoie ton code avant de le poster(supprime les lignes vides)

A+.

j'ai modifier mon site pour qu'il recupere les sessions , tout marche niquel merci beaucoups, juste un hic, quand il me met le div une fois connecté il ne me recupere pas les pseudos et autre information sur le coup

ça peut etre du a quoi ?

voila le code

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
<?
session_start();
?><SCRIPT language=JavaScript src="js/connect.js"></SCRIPT>
 
<?
if (isset($_SESSION["logged"]) && $_SESSION["logged"] == "true")
{
 
 
 
?>
<div id="login-on" style="display: block;">
<? } else {?>
<div id="login-on" style="display: none;">
<? } ?>
 
 
<? 
include("mysqlcon.php"); 
include("recuperation.php");
include ("ajaxmsg.php"); ?>
<img src="/images/profil.jpg" style="float:left;" width="50" height="50"<> <b><? echo $pseudocon; ?></b> - <a href="/page.php?mod=deco">Déconnection</a><br>
<br>
<b><a href="/page.php?mod=gestblog" rel="facebox">Gere ton blog</b></a> - <a href="/page.php?mod=gestprofil">Gere Ton Profil</a>
 
 
</div>
<?
if (isset($_SESSION["logged"]) && $_SESSION["logged"] == "true")
{
?>
<div id="login-off" style="display: none;">
<?
} else { ?>
<div id="login-off" style="display: block;">
<? } ?>
<div class='centre0' id="test">
 
<form method="POST" onsubmit="maFonctionAjax(this.email.value,this.mdp.value);return false" action="">
Email   <input name="email" id="email"  type="text" /><br />
MDP :  <input name="mdp" id="mdp"  type="password" /><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 </div>
</div>
 
<div id="LeRetour"></div>
</body></html>

21/10/2010, 22h38
toulousain3117

En testant mon code sur plusieurs version j'ai remarqué que a la connection au fichier connect.php, il ne recupere pas la session ouverte, comment je peux la recupere dans le js en sachant que j'ai bien session_start(); dans toute mes pages ?
31/10/2010, 13h15
toulousain3117

j'ai reussi , au changement de la div je fait juste un refresh de la div qui donc met la connection actif puis le refresh je l'arrete peu de temps avant la connection merci a tou s pour votre aide