Fenêtre modale Bootstrap

Signaler
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015
-
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
-
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

6 réponses

Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
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
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
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 ;-((
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328 >
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) ?
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
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 )??
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
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)
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

<!-- 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>
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
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
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.
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328 >
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
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

Capture d'écran

Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
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)
Messages postés
15
Date d'inscription
samedi 11 avril 2015
Statut
Membre
Dernière intervention
20 avril 2015

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>
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
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 ?