IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

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


Sujet :

AJAX

  1. #1
    Membre habitué
    Inscrit en
    Janvier 2007
    Messages
    437
    Détails du profil
    Informations forums :
    Inscription : Janvier 2007
    Messages : 437
    Points : 184
    Points
    184
    Par défaut [AJAX] Fermeture Div et ouverture d'une autre div
    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 : 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
    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 : 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
    <?
    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 ?

  2. #2
    Membre émérite
    Avatar de supersnail
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    1 719
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 1 719
    Points : 2 793
    Points
    2 793
    Par défaut
    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

  3. #3
    Membre habitué
    Inscrit en
    Janvier 2007
    Messages
    437
    Détails du profil
    Informations forums :
    Inscription : Janvier 2007
    Messages : 437
    Points : 184
    Points
    184
    Par défaut
    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

  4. #4
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Bonsoir,

    Utilise display:none et display:block pour les div. Tu ne fais que cacher l'unmais tu n'affiches pas l'autre.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="login-on" style="display: none;">

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

    A+.

  5. #5
    Membre habitué
    Inscrit en
    Janvier 2007
    Messages
    437
    Détails du profil
    Informations forums :
    Inscription : Janvier 2007
    Messages : 437
    Points : 184
    Points
    184
    Par défaut
    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 : 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
    <?
    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>

  6. #6
    Membre habitué
    Inscrit en
    Janvier 2007
    Messages
    437
    Détails du profil
    Informations forums :
    Inscription : Janvier 2007
    Messages : 437
    Points : 184
    Points
    184
    Par défaut
    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 ?

  7. #7
    Membre habitué
    Inscrit en
    Janvier 2007
    Messages
    437
    Détails du profil
    Informations forums :
    Inscription : Janvier 2007
    Messages : 437
    Points : 184
    Points
    184
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 11
    Dernier message: 18/06/2016, 11h52
  2. Hauteur d'une DIV en fonction d'une autre DIV via JavaScript
    Par friendofweb dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/09/2015, 10h58
  3. Hauteur d'une DIV en fonction d'une autre DIV
    Par philippef dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 01/09/2015, 18h30
  4. afficher une div au survol d'une autre div
    Par Vanlen dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/12/2010, 09h00
  5. Div qui fait baisser une autre div
    Par kate59 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 25/01/2009, 21h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo