Fenêtre modale Bootstrap

Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Bonjour,
Je souhaite faire apparaître une fenêtre modale (dans une boucle for) avec Bootstrap en cliquant sur un bouton.
Le problème est que, avec ce code, la fenêtre ne s'affiche et je ne sais pas pourquoi.

Merci d'avance pour votre aide.

Voici mon code :
<?php 
   for ($i = 0; $i < count($query) ; $i++) 
   { 
?> 
   <h1><?php echo $query[$i]['nom_formation']; ?>  
   <button data-target='myModal' data-toggle='modal' class='btn btn-  primary'>S'inscrire</button> 

   <div class="modal fade" id="myModal"> 
      <div class="modal-dialog"> 
         <div class="modal-content"> 
            <div class="modal-header"> 
               <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
            </div> 
            <div class="modal-body"> Inscription à : 
               <?php echo $query[$i]['nom_formation']; ?> 
               <button class='btn btn-primary'>Confirmer</button> 
               <button type="button" class="close" data-dismiss="modal">Annuler</button> 
            </div> 
         </div> 
      </div> 
   </div> 
   <h3>Contenu de la formation</h3> 
   <p><?php echo $query[$i]['contenu_formation']; ?></p> 

<?php 
   } 
?>


EDIT : AJout des balises de code
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Afficher la suite 

6 réponses

Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314
0
Merci
Bonjour,

Il faut sortir la div modal de ta boucle..... car tu ne peux pas avoir plusieurs modal avec le même ID .... sinon... impossible pour ton programme de savoir lequel tu appelles.... et il n'est pas utile de créer X fois la même modal... lorsque seul le contenu change (pas la forme...)
Ensuite... tu peux passer les variable via les attributs DATA- ... ou encore mieux.... récupérer les INFOS via AJAX.

Par exemple (avec des DATA ) :

<?php 
   for ($i = 0; $i < count($query) ; $i++) { 
 $nom_formation = $query[$i]['nom_formation'];
?> 
   <h1><?php echo $nom_formation; ?>  
   <button data-target='myModal' 
               data-toggle='modal' 
               data-formationID='<?php echo $i;?>' 
               data-formation_nom='<?php echo $nom_formation;?>'
               class='btn btn-primary LienModal'>
                  S\'inscrire
  </button> 

    <h3>Contenu de la formation</h3> 
   <p><?php echo $query[$i]['contenu_formation']; ?></p> 

<?php 
   } 
?>

  <div class="modal fade" id="myModal"> 
      <div class="modal-dialog"> 
         <div class="modal-content"> 
            <div class="modal-header"> 
               <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
            </div> 
            <div class="modal-body"> Inscription à : 
               <span id="nom_formation"></span> 
               <button class='btn btn-primary'>Confirmer</button> 
               <button type="button" class="close" data-dismiss="modal">Annuler</button> 
            </div> 
         </div> 
      </div> 
   </div> 

 <script type="text/javascript">
$(".LienModal").click(function(){
 var formationID = $(this).data('formationID');
var nom_formation = $(this).data('nom_formation');
 $("#myModalLabel").html(formationID );
 $("#nom_formation").html(nom_formation);

});
</script>


Cordialement,
Jordane
marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Oui et la fenêtre modale
marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Toujours pas d'alert ni de fenêtre ;-((
jordane45
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314 > marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Et les CONSOLE.LOG ??
Tu es sûr que dans la console FIREBUG tu n'as aucun message d'erreur ? (erreur de script ou autre ) ??

Tu pourrais nous poster le code COMPLET de cette page ? ( y compris avec les includes Javascript et CSS) ?
jordane45
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314 -
Ah et encore une chose ....
Tu ouvres ta page dans ton navigateur ok ... mais tu as quoi dans l' URL ??
Si tu bosses en local ... tu passes bien par un WEMPSERVER (ou un EasyPhp et équivalent) ? (donc dans ton URL tu as quelque chose du genre : http://localhost/monsite/mapage.php )??
marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Commenter la réponse de jordane45
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314
0
Merci
Donc :
- Donne nous le code complet de la page
- Fais un imprime écran de la console de Firebug lorsque la page est ouverte dans ton navigateur.
(assures toi que dans la console : "afficher les erreurs javascript" est bien cochée)
Commenter la réponse de jordane45
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
0
Merci
<!-- Header -->
<?php
session_start();
include '../commun/class/classeSQL.php';
$sql = new ClassSQL();

if(!isset($_SESSION["id"])) {
header('location:../index.php');
}
?>

<!DOCTYPE html>

<head>
<meta charset='utf-8'>
<title>Intranet</title>

<!-- BOOTSTRAP -->
<link href="../commun/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../commun/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
<script scr="../commun/bootstrap/js/jquery.js" type="text/javascript"></script>
<script scr="../commun/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>

<body>

<div class="container">

<header>

<!-- TITRE + LOGO -->
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<h1 class="navabr-brand">   <img width="150" heigth="150" src='../commun/image/logo.png' alt='logo'>
   Gestion des formations</h1>
</div>

<!-- BARRE DE MENU -->
<ul class="nav navbar-nav">
<li><a href='formations_user.php'>         Mes formations      </a></li>
<li><a href='offres.php'>      Offres      </a></li>
<li><a href='compte_user.php'>      Mon compte      </a></li>
<li><a href='javascript:if(confirm("Etes-vous sur(e) de vouloir vous déconnecter ?"))document.location.href="../commun/class/deconnexion.php"' >      Déconnexion  <span class="glyphicon glyphicon-off"></span></a></li>
<li><a href='guide_user.php'>      <span class="glyphicon glyphicon-question-sign"></span></a></li>
</ul>

<?php
$sql = $sql->GetUtilisateur($_SESSION["id"]);
?>

<p class="navbar-text pull-right"><span class="glyphicon glyphicon-user"></span>  Connecté(e) en tant que <?php echo $sql[0]['prenom_utilisateur']." ".$sql[0]['nom_utilisateur']; ?></p>

</nav>
</div>

</header>


<!-- Description de la formation -->
<?php
$query = new ClassSQL();
$query = $query->GetDescriptifFormation($_GET['id_formation']);
$nom = $query[0]['nom_formation'];
?>
<center>
<h1><?php echo $query[0]['nom_formation']; ?>  <button data-target='#myModal' data-toggle='modal' data-formation_nom='<?php echo $nom;?>' class='btn btn-primary LienModal'>S'inscrire</button></h1>

<h3>Contenu de la formation</h3>
<p><?php echo $query[0]['contenu_formation']; ?></p>

<h3>Durée</h3>
<p><?php
$debut = new DateTime($query[0]['date_debut_formation']);
$fin = new DateTime($query[0]['date_fin_formation']);
$duree = $fin->diff($debut);
echo $duree->format('%a jours');
?></p>

<h3>Lieu</h3>
<p><?php echo $query[0]['lieu_formation']; ?></p>

<h3>Prestataire</h3>
<p><?php echo $query[0]['prestataire_formation']; ?></p>
</center>

<!-- FENETRE MODAL -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation d'inscription</h4>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment participer à la formation : <?php echo $nom; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Participer</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
</div>
</div>
</div>
</div>


<script type="text/javascript">
console.log("Ready devrait s'afficher en dessous...");
$(document).ready(function() {
console.log( "ready!" );
});

if(!window.jQuery){
alert("Jquery n'est pas chargé !");
}else{
alert("Jquery => OK ");
}
</script>

<!-- Footer -->
<footer>

<center>


<p>
Gestion des formations des salariés de la Maison des Ligues
</p>

<p>
Réalisé par Marine Lancelin
<br>
Etudiante en BTS SIO SLAM Ã ITIC Paris
<br>
Session 2014/2015
</p>



</center>

</footer>

<!-- CLASS CONTAINER -->
</div>

</body>

</html>
Commenter la réponse de marinesl
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314
0
Merci
Tu peux tester ce code :

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Intranet</title> 
 <!-- JQUERY -->
  <script type="text/javascript" scr="../commun/bootstrap/js/jquery.js"></script>
 <!-- BOOTSTRAP -->
  <link href="../commun/bootstrap/css/bootstrap.css" rel="stylesheet" />
  <link href="../commun/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
  <script type="text/javascript" scr="../commun/bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>

 <div class="container">
  <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Modal</a>
  <!-- FENETRE MODAL -->
     <div id="myModal" class="modal fade">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h4 class="modal-title">Confirmation d'inscription</h4>
                 </div>
                 <div class="modal-body">
                     <p>Voulez-vous vraiment participer à la formation : <?php echo $nom; ?></p>
                 </div>
                 <div class="modal-footer">
                  <button type="button" class="btn btn-primary">Participer</button>
                     <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                 </div>
             </div>
         </div>
     </div>
  
    
<script type="text/javascript">
 console.log("Ready devrait s'afficher en dessous...");
 $(document).ready(function() {
   console.log( "ready!" );
 });

 if(!window.jQuery){
   alert("Jquery n'est pas chargé !");
 }else{
  alert("Jquery => OK ");
 }
</script>
 


<!-- CLASS CONTAINER -->
 </div>
</body>
</html>


Par contre... le jquery.js .... tu as bien pris celui que je t'ai donné tout à l'heure ??
c'est à dire : http://code.jquery.com/jquery-1.11.2.js

Et surtout ... pourras tu nous faire une capture écran de la console FIREBUG dans le cas où ça ne marcherait toujours pas ?

Cordialement,
Jordane
marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
J'ai bien pris ce jquerry.
J'ai testé ton code, ça ne marche pas non plus et je n'arrive pas à t'envoyer ma capture d'écran.
jordane45
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314 > marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Pour les captures écran. .il fautrrépondre au message. . Pas utiliser les commentaires
Commenter la réponse de jordane45
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
0
Merci
Capture d'écran

jordane45
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314 -
Bon ben .. l'image est plus que parlante .. une ligne rouge = ERREUR !!
Cela indique qu'il n'a pas réussi à charger JQUERY.
Tu es sûr du chemin vers les fichiers ??

où se trouve ta page par rapport aux scripts ? (autrement dit.. quelle est l'arborescence de ton site)
Commenter la réponse de marinesl
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
0
Merci
Si le css fonctionne, je comprends pas pourquoi le jquery ne fonctionne pas :



<link href="../commun/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../commun/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
<script scr="../commun/bootstrap/js/jquery.js" type="text/javascript"></script>
<script scr="../commun/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
jordane45
Messages postés
26302
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2019
314 -
Ecoutes... pour faire le test ...
Tu copies les fichiers Bootstrap et JS dans un même repertoire .. ainsi que ton fichier de test.php ......
et tu changes le chemin des includes bien entendu...
j'utilise BS et Jquery au quotidien... et je n'ai aucun souci.... donc hormis un PB de chemin .. je ne vois pas !

Au cas où... tu peux nous coller le contenu de ton fichier jquery.js ?
Commenter la réponse de marinesl