Geek Boy (GeekBoy),
il y a 8 ans
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,
il y a 8 ans
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">×</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),
il y a 8 ans
Ton code est commenté enleve les / /
Valentin BRETEL,
il y a 8 ans
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),
il y a 8 ans
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" />
Valentin BRETEL,
il y a 8 ans
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">×</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>