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

JavaScript Discussion :

Erreur Modale ne s'ouvre qu'une fois


Sujet :

JavaScript

  1. #1
    Membre actif
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    880
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : janvier 2011
    Messages : 880
    Points : 219
    Points
    219
    Par défaut Erreur Modale ne s'ouvre qu'une fois
    Bonjour à tous,

    Je dispose d'un formulaire de login modal qui s'ouvre lors d'un click sur un lien de barre de navigation, le problème étant qu'il ne veut pas s'ouvrir une seconde fois une fois exécuté le code php.
    J'ai beau faire un ctrl + F9 dans les différents navigateurs sitôt on clique sur le bouton de submit du modal le link contenu pourtant dans une navbar qui n'a rien à voir avec le modal en lui même n'est plus clickable ...

    (si par contre je ferme le modal sans exécuter le traitement coté serveur le link est toujours clickable et réactif ...)

    Merci d'avance pour vos lumières...

    loginform.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
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    <?php
    //Initialisation variables en cas d'erreur pour retour dans champs du formulaire
    $errorUserName = "";
    $errorUserPassword = "";
    ?>
     
    <div id="loginFormModal" class="modal">
     
        <form class="modal-content animate" action="" method="post">
            <div class="imgcontainer">
                <span onclick="document.getElementById('loginFormModal').style.display='none'" class="close" title="Fermer ce formulaire">&times;</span>
                <img src="" alt="" class="">
            </div>
     
            <div class="container">
                <label for="userName"><b> Nom d'utilisateur</b></label>
                <input type="text" placeholder="Votre Pseudo ou votre nom d'utilisateur" name="userName" required>
                <div class="errorUserName">
                    <p><?= $errorUserName ?></p>
                </div>
     
                <label for="psw"><b>Mot de passe</b></label>
                <input type="password" placeholder="Votre mot de passe" name="userPassword" required>
                <div class="errorUserPassword">
                    <p><?= $errorUserPassword ?></p>
                </div>
     
                <button type="submit">Se connecter</button>
                <label>
                    <input type="checkbox" checked="checked" name="remember"> Se rapeller de moi
                </label>
                <p>Pas encore inscrit ? <a href="submitForm.php">Cliquez ici</a></p>
            </div>
     
            <div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('loginFormModal').style.display='none'" class="cancelbtn">Annuler et fermer</button>
                <span class="psw">Mot de passe perdu? <a href="#">Cliquez ici</a></span>
            </div>
        </form>
    </div>
     
    <?php
     
    //Vérification existence de l'utilisateur dans la table users
     
    if (isset($_POST['userName']) && !empty($_POST['userName'])) {
        $userName = $_POST['userName'];
     
        echo $userName;
        $this->User->userNameCheck($userName);
     
        //Si l'utilisateur est reconnu comme existant alors on continue avec la vérification du couple user/password
        if ($retour['ServerResponse'] == "userExists") {
     
            //Vérification du mot de passe de l'utilisateur en cours
            if (
                isset($_POST['userName']) && !empty($_POST['userName'])
                && isset($_POST['userPassword']) && !empty($_POST['userPassword'])
            ) {
                $userPassword = $_POST['userPassword'];
                echo $userName . ' ' . $userPassword;
                $this->User->userPasswordCheck($userName, $userPassword);
            }
        }
    }
     
    ?>
     
    <script>
        //Fermer le formulaire modal de login si click en dehors de la fenêtre
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
    header.php (contenant le link dans la navbar)

    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
    <body>
        <div class="wrapper">
            <header>
     
                <nav class="nav_checkbox">
                    <a href="#" class="logo">
                        <h2>PetsBook</h2>
                    </a>
                    <input type="checkbox" id="nav-tab" class="nav-tab">
                    <label for="nav-tab" class="label">
                        <div class="burger"></div>
                        <div class="burger"></div>
                        <div class="burger"></div>
                    </label>
                    <ul class="content_nav">
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Encyclopédie</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="loginModalLink"><a href="#" id="loginModalLink">Se connecter</a></li>
                    </ul>
                </nav>
     
            </header>
     
            <?php require_once './includes/loginForm.php'; ?>
            <script>
                // Bouton qui ouvre le modal du formulaire de login
                var btn = document.getElementById("loginModalLink");
                // Get the modal
                var modal = document.getElementById('loginFormModal');
                // When the user clicks the button, open the modal 
                btn.onclick = function() {
                    modal.style.display = "block";
                }
            </script>

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 923
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 923
    Points : 65 270
    Points
    65 270
    Billets dans le blog
    1
    Par défaut
    Je n'ai pas trop bien compris comment ton formulaire arrivait dans ta page, mais je soupçonne que ce soit parce que l'event onclik ne survit pas au rafraichissement de page induit pas la soumission du form
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      btn.onclick = function() {
                    modal.style.display = "block";
                }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre actif
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    880
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : janvier 2011
    Messages : 880
    Points : 219
    Points
    219
    Par défaut
    Et du coup on fait quoi ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 923
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 923
    Points : 65 270
    Points
    65 270
    Billets dans le blog
    1
    Par défaut
    réattribue le onclick après le rechargement...
    ou revoit ton ergonomie générale, comme par exemple voir la modale dans la page au départ sans avoir à la charger
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre actif
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    880
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : janvier 2011
    Messages : 880
    Points : 219
    Points
    219
    Par défaut
    Bonjour SpaceFrog

    Après des heures de test la solution était plus que simple aucun script nécessaire, il suffisait d'inclure dans le 'onclick' des links en question :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <ul class="content_nav">
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Encyclopédie</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="loginModalLink"><a class="loginModalLink" href="#" id="loginModalLink" onclick="document.getElementById('loginFormModal').style.display='block';">Se connecter</a></li>
                        <li class="registrationModalLink"><a class="registrationModalLink" href="#" id="registrationModalLink" onclick="document.getElementById('registrationFormModal').style.display='block';">S'inscrire</a></li>
                    </ul>

    Et d'inclure les formulaires avec des include_once...

    Merci pour ton aide

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 923
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 923
    Points : 65 270
    Points
    65 270
    Billets dans le blog
    1
    Par défaut
    inclure les formulaires avec des include_once
    par exemple voir la modale dans la page au départ sans avoir à la charger
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

Discussions similaires

  1. [AC-2007] Erreur 462 sur du VBA Excel une fois sur deux
    Par lio33 dans le forum VBA Access
    Réponses: 6
    Dernier message: 16/04/2013, 09h41
  2. Popup avec fond transparent qui ne s'ouvre qu'une fois par session
    Par vamsbog dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 11/04/2012, 20h32
  3. Un formulaire qui ne s'ouvre qu'une fois
    Par thomjacq dans le forum IHM
    Réponses: 1
    Dernier message: 07/05/2009, 22h54
  4. Erreur ASP : le test qui marche une fois sur 2 !
    Par Ryo_san dans le forum ASP
    Réponses: 2
    Dernier message: 04/07/2006, 09h47
  5. Pourquoi ce popup s'ouvre qu'une fois ?
    Par psychoBob dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 01/06/2006, 12h11

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