Affichage Modal

Valentin BRETEL
Javascript

Bonjour,
J'ai crée une Modal avec Javascript et jQuery mais j'ai eu des problèmes pour l'afficher, j'ai donc utiliser boostrap pour créer ma modal qui exécutera mon code Javascript et jQuery mais rien n'y fait toujours pas d'affichage de modal.
Auriez-vous une solution ?
Merci d'avance.

Voilà ma page layout.phtml :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Valentin BRETEL Développeur/Intégrateur d'applications web</title>

    <!-- Feuilles de style externes -->
    <link rel="stylesheet" href="<?= CSS_SRC ?>/normalize-3.0.3.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- BOOSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--Typographie-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bangers|Josefin+Sans">

    <!--CSS Perso-->
    <link rel="stylesheet" type="text/css" href="<?= CSS_SRC ?>/style.css">

</head>
<body>
    <header>
        <h1>
            Valentin BRETEL
        </h1>
        <h2>
            Développeur/Intégrateur d'applications web
        </h2>
        <hr>
        <nav>
            <a href="<?= HOME_SRC ?>/index.php">Accueil</a>
            <a href="<?= PHP_SRC ?>/career.php">Mon parcours</a>
            <a href="<?= PHP_SRC ?>/projects.php">Réalisations</a>
            <a href="<?= PHP_SRC ?>/contact.php">Contact</a>
        </nav>

    </header>

    <main>
        <!-- Chargement du template PHTML spécifié par le programme PHP -->
        <?php include $template.'.phtml' ?>
    </main>

    <footer>
        <a href="https://www.linkedin.com/in/valentin-bretel-27615b146/">
            <i class="fa fa-linkedin"></i>LinkedIn
        </a>
        <p>© COPYRIGHT 2017 · VALENTIN BRETEL · ALL RIGHTS RESERVED · <span>any reproduction is prohibited<span></p>
    </footer>

    <!-- Librairie jQuery -->
    <script   src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous">              
    </script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Ma page contact.phtml :

<section>
    <form class="generic-form">
        <fieldset>
            <legend><i class="fa fa-book"></i> Informations </legend>
            <ul>
                <li>
                    <label>Nom :</label>
                    <input type="text" id="lastName" name="lastName" placeholder="Nom">
                </li>
                <li>
                    <label>Prénom :</label>
                    <input type="text" id="firstName" name="firstName" placeholder="Prénom">
                </li>
                <li>
                    <label>Entreprise :</label>
                    <input type="text" id="entreprise" name="entreprise" placeholder="Entreprise">
                </li>
                <li>
                    <label>Ville :</label>
                    <input type="text" id="city" name="city" placeholder="Ville">
                </li>
                <li>
                    <label>Code postal :</label>
                    <input type="text"
                            id="zipcode" name="zipcode" maxlength="5" placeholder="Code postal">
                </li>
                <li>
                    <label>E-mail :</label>
                    <input type="text" id="email" name="email" type="text" placeholder="E-mail">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend><i class="fa fa-book"></i> Message </legend>
                <ul>
                    <li>
                        <input type="textarea" id="message" name ="message" placeholder="Message">
                    </li>

                    <li id="modalHere">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter">
                          Envoyer
                        </button>
                        <a class="btn btn-danger" href="<?= HOME_SRC ?>/index.php">Annuler</a>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                ...
                              </div>
                              <div class="modal-footer">
                                <button type="button" id="contactMe" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                              </div>
                            </div>
                          </div>
                        </div>

                    </li>
                </ul>
        </fieldset>
    </form>
</section>
<script type="text/javascript" src="<?= VIEWS_SRC ?>/js/modal.js"></script>

Mon code modal.js :

/*function create_modal(id,title,content_html,footer){
    var bdy = document.createElement('div');
    var modal = document.createElement('div');
    var dialog = document.createElement('div');
    var content = document.createElement('div');
    var header = document.createElement('div');
    var ftr = document.createElement('div');
    modal.className ='modal fade';
    modal.setAttribute('id',id);
    modal.setAttribute('role','dialog');
    dialog.className ='modal-dialog';
    modal.appendChild(dialog);
    content.className ='modal-content';
    dialog.appendChild(content);
    header.className ='modal-header';
    content.appendChild(header);
    var titl = document.createElement('h4');
    titl.innerHTML = title;
    titl.className ='modal-title';
    header.appendChild(titl);
    bdy.className ='modal-body';
    bdy.setAttribute('id',id+'-modal-body');
    if ((content_html) && (content_html != ''))bdy.innerHTML = content_html;
    content.appendChild(bdy);
    ftr.className ='modal-footer';
    ftr.innerHTML = footer;
    content.appendChild(ftr);
    $('body').append(modal);

    create_button("button", "Envoyer", "modalClick", "#modalHere", "modalClick", true, "#envoyerInformations");//mettre display none modalClick

    $(function(){
        $("#modalClick").trigger("click");
    })

    $("#modalClick").click( function () {
        /*contactModal();*/
/*        console.log("ok");
    });
}*/

/*function create_button(type,val,id,target,_class,modal,modal_target){ 
    var btn =document.createElement(type);
    if((id)&&(id != '')) btn.setAttribute('id',id);
    if((type)&&(type!='a')&&(type!='')&&(type!='li')) btn.setAttribute('type',type);
    if(modal){
        btn.setAttribute('data-toggle','modal');
        btn.setAttribute('data-target',modal_target);
    }
    if((_class)&&(_class!='')) btn.setAttribute('class',_class);
    btn.innerHTML=val;
    if ((target)&&(target!='')) $(target).append(btn);
    return btn;
}*/

/*function contactModal(){
    var content= `<p>Les informations saisies ne sont pas sécurisées. En cliquant sur envoyer, vous certifiez avoir pris connaissance de cette information.</p>`;
    var btns = '<button class="button button-primary" id="envoyer" type="submit">Envoyer</button>' +
            '<a class="button button-cancel" href="<?= HOME_SRC ?>/index.php">Annuler</a>';

    create_modal('envoyerInformations','Sécurité',content,btns);

    $("#envoyer").click(function () {
        envoiInfo();
    });
}*/
function envoiInfo(){
    $.ajax({
        type: 'POST',
            url: '../php/contact.php',
            data: { 'contact': $("#contact").val() },
            success: function (response) {
           alert(response);
           console.log(response); 
       }    
    });
}

/*$(function () {
        $("#contact").click( function () {
            contactModal();
        });
});*/

$(function () {
        $("#contactMe").click( function () {
            envoiInfo();
        });
});

6 réponses

Valentin BRETEL
Auteur
Réponse acceptée

Le input n'a pas marché mais c'est bon ça marche, j'ai résolu mon problème!

Voilà mon code:

modal.js

$(document).ready( function() {
    function envoiInfo(){
        $.ajax({
            type: 'POST',
            url: '../php/contact.php',
            data:  $(".generic-form").serialize(),
            success: function (response) {
           }    
        });
    }

    $("#contactMe").click( function () {
        envoiInfo();
    });
});

layout.phtml

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Valentin BRETEL Développeur/Intégrateur d'applications web</title>

    <!-- Feuilles de style externes -->
    <link rel="stylesheet" href="<?= CSS_SRC ?>/normalize-3.0.3.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- BOOSTRAP LINK-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!--Typographie-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bangers|Josefin+Sans">

    <!--CSS Perso-->
    <link rel="stylesheet" type="text/css" href="<?= CSS_SRC ?>/style.css">

    <!-- Librairie jQuery -->
    <script   src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous">              
    </script>
    <!-- BOOSTRAP SCRIPT-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<body>
    <header>
        <h1>
            Valentin BRETEL
        </h1>
        <h2>
            Développeur/Intégrateur d'applications web
        </h2>
        <hr>
        <nav>
            <a href="<?= HOME_SRC ?>/index.php">Accueil</a>
            <a href="<?= PHP_SRC ?>/career.php">Mon parcours</a>
            <a href="<?= PHP_SRC ?>/projects.php">Réalisations</a>
            <a href="<?= PHP_SRC ?>/contact.php">Contact</a>
        </nav>

    </header>

    <main>
        <!-- Chargement du template PHTML spécifié par le programme PHP -->
        <?php include $template.'.phtml' ?>
    </main>

    <footer>
        <a href="https://www.linkedin.com/in/valentin-bretel-27615b146/">
            <i class="fa fa-linkedin"></i>LinkedIn
        </a>
        <p>© COPYRIGHT 2017 · VALENTIN BRETEL · ALL RIGHTS RESERVED · <span>any reproduction is prohibited<span></p>
    </footer>
    <script type="text/javascript" src="<?= VIEWS_SRC ?>/js/modal.js"></script>
</body>
</html>

contact.phtml

<section>
    <form class="generic-form">
        <fieldset>
            <legend><i class="fa fa-book"></i> Informations </legend>
            <ul>
                <li>
                    <label>Nom :</label>
                    <input type="text" id="lastName" name="lastName" placeholder="Nom">
                </li>
                <li>
                    <label>Prénom :</label>
                    <input type="text" id="firstName" name="firstName" placeholder="Prénom">
                </li>
                <li>
                    <label>Entreprise :</label>
                    <input type="text" id="entreprise" name="entreprise" placeholder="Entreprise">
                </li>
                <li>
                    <label>Ville :</label>
                    <input type="text" id="city" name="city" placeholder="Ville">
                </li>
                <li>
                    <label>Code postal :</label>
                    <input type="text"
                            id="zipcode" name="zipcode" maxlength="5" placeholder="Code postal">
                </li>
                <li>
                    <label>E-mail :</label>
                    <input type="text" id="email" name="email" type="text" placeholder="E-mail">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend><i class="fa fa-book"></i> Message </legend>
                <ul>
                    <li>
                        <input type="textarea" id="message" name ="message" placeholder="Message">
                    </li>

                    <li id="modalHere">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter">
                          Envoyer
                        </button>
                        <a class="btn btn-danger" href="<?= HOME_SRC ?>/index.php">Annuler</a>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h3 class="modal-title" id="exampleModalLongTitle">Sécurité</h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                <p>Les informations saisies ne sont pas sécurisées. En cliquant sur envoyer, vous certifiez avoir pris connaissance de cette information.</p>
                              </div>
                              <div class="modal-footer">
                                <button type="button" id="contactMe" class="btn btn-success">Envoyer</button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
                              </div>
                            </div>
                          </div>
                        </div>

                    </li>
                </ul>
        </fieldset>
    </form>
</section>
Geek Boy (GeekBoy)

Déja tu utilise le javascript de Bootstrap 4 dans l'appel de tes scripts en bas de page , alors que tu utilise Bootstrap 3.3.7 pour ton CSS

Valentin BRETEL
Auteur

Ah oui c'est vrai, merci. J'avais oublié que j'avais changé de bootstrap récemment. La Modal s'affiche maintenant, je l'ai un peu modifié. Mais le code modal.js ne s'exécute pas quand je clique sur mon bouton Envoyer.

Voilà mon message d'alert dans la console :
ReferenceError: $ is not defined[En savoir plus] modal.js:85:1

<!-- Modal -->
                        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h3 class="modal-title" id="exampleModalLongTitle">Sécurité</h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                <p>Les informations saisies ne sont pas sécurisées. En cliquant sur envoyer, vous certifiez avoir pris connaissance de cette information.</p>
                              </div>
                              <div class="modal-footer">
                                <button type="button" id="contactMe" class="btn btn-success">Envoyer</button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
                              </div>
                            </div>
                          </div>
                        </div>
Geek Boy (GeekBoy)

Ton code est commenté enleve les / /

Valentin BRETEL
Auteur

Ce qui était en commentaire, c'était pour montrer mon code qui créer une modal mais vu que bootstrap marche, il ne faut pas en tenir compte. Voilà les fonctions que j'utilise et qui m'intéresse.

function envoiInfo(){
    $.ajax({
        type: 'POST',
            url: '../php/contact.php',
            data: { 'contact': $("#contact").val() },
            success: function (response) {
           alert(response);
           console.log(response); 
       }    
    });
}

$(function () {
        $("#contactMe").click( function () {
            envoiInfo();
        });
});
Geek Boy (GeekBoy)

C'est bien ce que je penser c'etait trop gros , moi aussi je suis en galére pour créer un petit formulaire de recherche en Ajax avec une modal Bootstrap , essaye avec un input au lieu d'un bouton 

<input type="submit"  id="contactMe" value="Envoyer" class="btn btn-success" />