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 averti
    Homme Profil pro
    Dépanneur informatique
    Inscrit en
    Septembre 2021
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Dépanneur informatique

    Informations forums :
    Inscription : Septembre 2021
    Messages : 31
    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 496
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 496
    Par défaut
    Bonjour,

    Quel est le contenu de this.responseText ?

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

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

    Informations professionnelles :
    Activité : Dépanneur informatique

    Informations forums :
    Inscription : Septembre 2021
    Messages : 31
    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