Problème modal boostrap
anthony30190
Messages postés
16
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour a tous, j'ai un petit problème sur ma page: http://anthonydelgehier.cf/emc/index.php
Le problème c'est que je veut créer un modal diffèrent pour toute les types de catastrophes la j'ai commencer a en faire 2 différents sa marche bien mais le problème c'est que dans le tableaux , seul la première ligne ou le modal est active fonctionne et les autres non.
voila mon code:
Le problème c'est que je veut créer un modal diffèrent pour toute les types de catastrophes la j'ai commencer a en faire 2 différents sa marche bien mais le problème c'est que dans le tableaux , seul la première ligne ou le modal est active fonctionne et les autres non.
voila mon code:
<?php
session_start();
require_once('fonctions.php');
$bdd = new PDO('mysql:host=mysql.hostinger.fr;dbname=??;charset=utf8', '??', '??');
$videosParPage = 10;
$videosTotalesReq = $bdd->query('SELECT id FROM catastrophe');
$videosTotales = $videosTotalesReq->rowCount();
$pagesTotales = ceil($videosTotales/$videosParPage);
if(isset($_GET['page']) AND !empty($_GET['page']) AND $_GET['page'] > 0 AND $_GET['page'] <= $pagesTotales) {
$_GET['page'] = intval($_GET['page']);
$pageCourante = $_GET['page'];
} else {
$pageCourante = 1;
}
$depart = ($pageCourante-1)*$videosParPage;
?>
<html>
<head>
<style>
.image {
margin-top: 50px;
margin-left: 700px;
}
body {
margin:0;
padding:0;
background: url(image/dieux.png) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}
.bouton17 {
width:20px;
height:20px;
background:#fafafa;
box-shadow:2px 2px 8px #aaa;
font:bold 13px Arial;
border-radius:50%;
color:#555;
}
</style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="POST" action="">
<br>
<center>
<button type="submit" id="danger" name="danger" class="btn btn-danger">Action</button>
</center>
</form>
<?php
if(isset($_POST['danger']))
{
if(isset($_SESSION['utilisateur']))
{
$a_values = array(
"0" => 16,
"1" => 16,
"2" => 16,
"3" => 16,
"4" => 16,
"5" => 17
);
$i_result = rand(0,5);
if($i_result==0)
{
$date= time();
$nom="Tsunami";
$insertmbr = $bdd->prepare("INSERT INTO catastrophe(date, nom) VALUES(?, ?)");
$insertmbr->execute(array($date, $nom));
echo'<div class="image"><img src="image/tsunami.png" width="200" height="200" class="img-circle" ></div>';
echo '<br><br>';
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Tsunami</center></div>";
}else if ($i_result==1)
{
$date= time();
$nom="Eruption";
$insertmbr = $bdd->prepare("INSERT INTO catastrophe(date, nom) VALUES(?, ?)");
$insertmbr->execute(array($date, $nom));
echo'<div class="image"><img src="image/eruption.png" width="200" height="200" class="img-circle" ></div>';
echo '<br><br>';
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Eruption</center></div>";
}else if ($i_result==2)
{
$date= time();
$nom="Guerre";
$insertmbr = $bdd->prepare("INSERT INTO catastrophe(date, nom) VALUES(?, ?)");
$insertmbr->execute(array($date, $nom));
echo'<div class="image"><img src="image/guerre.png" width="200" height="200" class="img-circle" ></div>';
echo '<br><br>';
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Guerre</center></div>";
}else if ($i_result==3)
{
$date= time();
$nom="Maladie";
$insertmbr = $bdd->prepare("INSERT INTO catastrophe(date, nom) VALUES(?, ?)");
$insertmbr->execute(array($date, $nom));
echo'<div class="image"><img src="image/maladie.png" width="200" height="200" class="img-circle" ></div>';
echo '<br><br>';
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Maladie</center></div>";
}else if ($i_result==4)
{
$date= time();
$nom="Rien";
$insertmbr = $bdd->prepare("INSERT INTO catastrophe(date, nom) VALUES(?, ?)");
$insertmbr->execute(array($date, $nom));
echo'<div class="image"><img src="image/rien.png" width="200" height="200" class="img-circle" ></div>';
echo '<br><br>';
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Chance il n'y a rien</center></div>";
}else if ($i_result==5)
{
$date= time();
$nom="Seisme";
$insertmbr = $bdd->prepare("INSERT INTO catastrophe(date, nom) VALUES(?, ?)");
$insertmbr->execute(array($date, $nom));
echo'<div class="image"><img src="image/seisme.png" width="200" height="200" class="img-circle" ></div>';
echo '<br><br>';
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Seisme</center></div>";
}
}else{
echo"<div class='alert alert-danger alert-dismissable'><button type='button' class='close data-dimiss='alert' aria-hidden='true'></button><center>Erreur: Vous n'êtes pas dieux vous n'avez pas la permissions d'utiliser ce boutton cliquez <a href='dieux.php' rel="nofollow noopener noreferrer" target="_blank">ici</a> pour le devenir.</center></div>";
}
}
?>
<center>
<h1>
<font color="black">Liste des catastrophes </font>
</h1>
</center>
<hr />
<br>
<div class="container">
<div class="row-fluid">
<ol class="breadcrumb">
<?php
$sql = 'SELECT * FROM catastrophe ORDER BY id DESC LIMIT '.$depart.','.$videosParPage;
$req = $bdd->query($sql);
?>
<table class="table table-striped table-hover">
<thead>
<center>
<tr>
<th style="width:5%">ID</th>
<th style="width:10%">Nom</th>
<th style="width:10%">Date</th>
<th style="width:5%">Detaile</th>
</tr>
</thead>
<tr><?php while($row = $req->fetch()) { ?>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['nom']; ?></td>
<td><?php echo date('d/m/Y', $row['date'] ); echo" a "; echo date('H:i', $row['date'] ); ?></td>
<td>
<?php
$guerre= "Guerre";
$tsunami= "Tsunami";
if($row['nom']== $guerre)
{
?>
<button type="button" class="btn btn-info btn-lg" id="myBtn">guerre</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Guerre</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
}else if($row['nom']== $tsunami)
{
?>
<button type="button" class="btn btn-info btn-lg" id="myBtn">tsunami</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Tsunami</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
}
?>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
$("#myModal").modal1();
});
});
</script>
</td>
</tr>
<?php
}
?>
</table>
<center>
<ul class="pagination pagination">
<?php
$precedent= $pageCourante - 1;
if($precedent==0)
{
echo'<li><a href="index.php?page='.$pageCourante.'" rel="nofollow noopener noreferrer" target="_blank">Précédent</a></li>';
}else{
echo'<li><a href="index.php?page='.$precedent.'" rel="nofollow noopener noreferrer" target="_blank">Précédent</a></li>';
}
for($i=1;$i<=$pagesTotales;$i++) {
if($i == $pageCourante) {
echo'<li class="active"><a href="#" rel="nofollow noopener noreferrer" target="_blank">'.$i.'</a></li> ';
} else {
echo ' <li><a href="index.php?page='.$i.'" rel="nofollow noopener noreferrer" target="_blank">'.$i.'</a></li>';
}
}
$suivant= $pageCourante + 1;
if($pagesTotales<$suivant)
{
echo'<li><a href="index.php?page='.$pageCourante.'" rel="nofollow noopener noreferrer" target="_blank">Suivant</a></li>';
}else{
echo'<li><a href="index.php?page='.$suivant.'" rel="nofollow noopener noreferrer" target="_blank">Suivant</a></li>';
}
?>
</ul>
</center>
</ol>
</div>
</div>
<?php
if(isset($_SESSION['utilisateur']))
{
?>
<form method="POST" action="">
<br>
<center>
<button type="submit" id="deco" name="deco" class="btn btn-danger">Deconnexion</button>
</center>
</form>
<?php
}
if(isset($_POST['deco']))
{
$_SESSION = array();
session_destroy();
}
?>
</body>
</html>
1 réponse
Bonjour
Tous tes boutons du même type ont le même id, par exemple myBtn. Or un id DOIT être unique, car il est censé désigner une seule chose.
Donc tes fonction $("#myBtn")... s'appliquent toutes au même, le premier.
Il faut donner des noms différents ou utiliser d'autres méthodes pour associer les "onclick" aux boutons, qui n'utilisent pas d'id.
PS : bien retenu la leçon sur les mots de passe ?
Tous tes boutons du même type ont le même id, par exemple myBtn. Or un id DOIT être unique, car il est censé désigner une seule chose.
Donc tes fonction $("#myBtn")... s'appliquent toutes au même, le premier.
Il faut donner des noms différents ou utiliser d'autres méthodes pour associer les "onclick" aux boutons, qui n'utilisent pas d'id.
PS : bien retenu la leçon sur les mots de passe ?
En ce qui concerne ton problème, il y a de multiples solutions comme ajouter un compteur au nom du bouton.