Problème modal boostrap

Fermé

anthony30190 Messages postés 14 Date d'inscription jeudi 16 janvier 2014 Statut Membre Dernière intervention 24 décembre 2016 - Modifié par anthony30190 le 24/12/2016 à 15:57
Utilisateur anonyme - 24 déc. 2016 à 19:30

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:


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

Réponse 1 / 1

Utilisateur anonyme
Modifié par le père. le 24/12/2016 à 17:12

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 ?

anthony30190 Messages postés 14 Date d'inscription jeudi 16 janvier 2014 Statut Membre Dernière intervention 24 décembre 2016 8
24 déc. 2016 à 19:20

Ouai j'essaie dans la soirreee et les mdp jles est laissez meme pas 5 min j'ai edit avant tu entre des donnes dedans tte facon c pas mon vrai site c juste pour dev :-)

anthony30190 Messages postés 14 Date d'inscription jeudi 16 janvier 2014 Statut Membre Dernière intervention 24 décembre 2016 8
24 déc. 2016 à 19:23

Mais comment faire pour changer le nom vu que c un nombre alleatoire le tableau

Utilisateur anonyme > anthony30190 Messages postés 14 Date d'inscription jeudi 16 janvier 2014 Statut Membre Dernière intervention 24 décembre 2016
24 déc. 2016 à 19:30

Pour le mot de passe,5 minutes c'est 5 minutes de trop. D'ailleurs, posté à 15:04 et modifié à 15:57, ça fait pas loin d'une heure.

En ce qui concerne ton problème, il y a de multiples solutions comme ajouter un compteur au nom du bouton.

Discussions similaires

Problème avec modal en bootstrap

Problème lecture de vidéo

Impossible de lire les vidéos de certaines plateformes

"Cette vidéo n'a pas pu être lu"

Discussions similaires

Newsletters