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 :

CSS ne s'applique pas lors du remplacement d'un bloc


Sujet :

AJAX

  1. #1
    Membre à l'essai
    Homme Profil pro
    Dépanneur informatique
    Inscrit en
    Septembre 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Dépanneur informatique

    Informations forums :
    Inscription : Septembre 2021
    Messages : 31
    Points : 21
    Points
    21
    Par défaut CSS ne s'applique pas lors du remplacement d'un bloc
    Bonjour, mon css ne s'appliquent pas sur la partie de la page qui est remplacé.

    Voici mon code :

    account-create.php
    Code html : 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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    <?php 
     
    require('includes/inc-connexion.php');
    require('class/Users.php');
    require('class/usersManager.php');
    require('process/process-account-create.php');
    require('process/process-auth-user.php');
     
    ?>
     
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Formulaire d'inscription &amp; de connexion</title>
        <script src="https://use.fontawesome.com/d974f43f44.js"></script>
        <link rel="stylesheet" href="css/account-create.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="box">
                <form id="formCnx" name="form" action="" method="post">
                    <h1>S'inscrire</h1>
                    <p>
                        <input type="email" name="usernameForm" id="username"
                                class="input" placeholder="Adresse mail">
                        <span id="iconEmail"></span>
                    </p>
                    <div id="errorEmail"></div>
                    <div><?php if(isset($msgEmail)) echo $msgEmail ?></div>
                    <p>
                        <input type="password" name="userpassForm" id="userpass"
                                class="input" placeholder="Mot de passe">
                        <span id="iconPass"></span>
                    </p>
                    <div id="errorPass"></div>
                    <div><?php if(isset($msgPass)) echo $msgPass ?></div>
                    <p>
                        <input type="password" name="userpass2Form" id="userpass2"
                                class="input" placeholder="Retaper mot de passe">
                        <span id="iconPass2"></span>
                    </p>
                    <div id="errorPass2"></div>
                    <div><?php if(isset($msgPass2)) echo $msgPass2 ?></div>
     
                    <input type="submit" name="submitForm" value="Valider l'inscription" class="input">
                </form>
     
                <div><?php if(isset($message)) echo $message ?></div>
                <div><?php if(isset($msgUser)) echo $msgUser ?></div>
     
                <p>Déjà enregistré :<a href="login.php"> connectez-vous</a></p>
            </div>
        </div>
        <script src="js/account-create.js"></script>
    </body>
    </html>

    login.php
    Code html : 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
    <form id="formCnx" name="form" action="" method="post">
        <h1>Se connecter</h1>
        <p>
            <input type="email" name="usernameForm" id="username"
                    class="input" placeholder="Adresse mail">
            <span id="iconEmail"></span>
        </p>
        <div id="errorEmail"></div>
        <div><?php if(isset($msgEmail)) echo $msgEmail ?></div>
        <p>
            <input type="password" name="userpassForm" id="userpass"
                    class="input" placeholder="Mot de passe">
            <span id="iconPass"></span>
        </p>
        <div id="errorPass"></div>
        <div><?php if(isset($msgPass)) echo $msgPass ?></div>
     
        <input type="submit" name="submitForm" value="Se connecter" class="input">
    </form>
     
    <div><?php if(isset($message)) echo $message ?></div>
    <div><?php if(isset($msgUser)) echo $msgUser ?></div>
     
    <p>Pas encore enregistré :<a href="account-create.php"> s'inscrire</a></p>
    <p><a href="Forgot_your_password.php">Mot de passe oublié</a></p>

    js/account-create.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
    let xhr    = new XMLHttpRequest();
    let box    = document.querySelector('#box');
    let lien   = document.querySelector('p a');
     
    lien.addEventListener('click', function() {
     
        xhr.addEventListener('readystatechange', function() {
     
            if(this.readyState == 4 && this.status == 200) {
     
                box.innerHTML = this.responseText;
            }
            else if(this.readyState == 4 && this.status == 404) {
     
                box.innerHTML = 'Le fichier demandé est introuvable !';
            }
            else {
     
                box.innerHTML = '<img src="loading.gif">';
            }
        });
     
        xhr.open('GET', 'login.php');
        xhr.send();
    });
    Merci pour votre aide.

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 407
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 407
    Points : 4 847
    Points
    4 847
    Par défaut
    Bonjour,

    Quel est le contenu de this.responseText ?

    Montrez nous la partie CSS qui ne s'applique pas.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Dépanneur informatique
    Inscrit en
    Septembre 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Dépanneur informatique

    Informations forums :
    Inscription : Septembre 2021
    Messages : 31
    Points : 21
    Points
    21
    Par défaut
    Bonjour, j'ai réessayer il y a 1 semaine & au final ça a marcher. Par contre quand je clique sur la flèche de gauche pour revenir en arrière, là le css à disparu.

Discussions similaires

  1. CSS qui ne s'applique pas sur mon texte
    Par Msysteme dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 11/12/2014, 18h19
  2. Fichier CSS qui ne s'applique pas à ma JSP
    Par pierrotparma dans le forum Servlets/JSP
    Réponses: 5
    Dernier message: 16/07/2010, 16h31
  3. [CSS 2] Style qui ne s'applique pas sur un l'id d'un formulaire
    Par alexgille dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 02/07/2010, 10h00
  4. CSS qui ne s'applique pas
    Par kate59 dans le forum Langage
    Réponses: 15
    Dernier message: 14/02/2008, 16h18

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