Sujet Précédent Sujet Suivant

Fenêtre modale Bootstrap

marinesl Messages postés 15 Date d'inscription samedi 11 avril 2015 Statut Membre Dernière intervention 20 avril 2015 - Modifié par jordane45 le 20/04/2015 à 11:52
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 20 avril 2015 à 22:18

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

A voir également:

Modal php
Php modal - Meilleures réponses
Fenetre modale - Meilleures réponses
Php table - Conseils pratiques -PHP
"Php version 4.4.5" "build date" "server api" "php variables" ✓ - Forum PHP
Php protected ✓ - Forum PHP
Php version 4.4.6 build date server api php variables - Forum PHP
Exit php ✓ - Forum PHP

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
Modifié par jordane45 le 20/04/2015 à 12:04

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
Modifié par jordane45 le 20/04/2015 à 18:50

Merci pour ta réponse rapide.
Malheureusement j'ai beau recopié ton code parfaitement, le bouton ne fonctionne toujours pas.
J'ai mis en commentaire la boucle pour n'afficher que le bouton et même comme ça mon la fenêtre ne s'affiche pas.

<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">Confirmation d'incription</h4>
    </div>
    <div class="modal-body">
     Voulez-vous vraiment participer à cette formation :
     <button class='btn btn-primary'>Participer</button>
     <button type="button" class="close" data-dismiss="modal">Annuler</button>
    </div>
   </div>
  </div>
 </div>

EDIT : Ajout des balises de code (encore...)
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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344 > marinesl Messages postés 15 Date d'inscription samedi 11 avril 2015 Statut Membre Dernière intervention 20 avril 2015
20 avril 2015 à 18:52

Première chose à vérifier.... que tu n'aies pas d'erreur javascript dans ta page...
Pour cela je te conseille d'installer le plugin FIREBUG pour Firefox.. de la lander.. d'ouvrir ta page... et de regarder si des messages apparaissent dans la console.

Réponse 3 / 6

marinesl Messages postés 15 Date d'inscription samedi 11 avril 2015 Statut Membre Dernière intervention 20 avril 2015
20 avril 2015 à 21:02

<!-- 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>

Réponse 4 / 6

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
Modifié par jordane45 le 20/04/2015 à 21:22

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
20 avril 2015 à 21:27

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.

Pour les captures écran. .il fautrrépondre au message. . Pas utiliser les commentaires

Réponse 5 / 6

marinesl Messages postés 15 Date d'inscription samedi 11 avril 2015 Statut Membre Dernière intervention 20 avril 2015
20 avril 2015 à 21:34

Capture d'écran

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
20 avril 2015 à 21:56

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)

Réponse 6 / 6

marinesl Messages postés 15 Date d'inscription samedi 11 avril 2015 Statut Membre Dernière intervention 20 avril 2015
20 avril 2015 à 22:03

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 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
20 avril 2015 à 22:18

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 ?

Discussions similaires

UserForm non modale

gestion de profil des utilisateurs

convertir application php en apk

où trouver toutes les balises PHP et leurs fonctions??

PDO Liste déroulante : mise à jour valeur sélectionnée affichée

Afficher un tableau de données à travers la balise select

Votre réponse

Discussions similaires