Toggle div une partie d'une base de donnée SQL

Anonyme

13 janvier 2018 à 0:13:34

Bonjour, j'ai une base de données SQL que j'affiche champ par champ sur une page avec une boucle while

J'ai trop d'informations alors je veux en cacher une partie avec un bouton toggle

voilà le code:

<script type="text/javascript">
function toggle_div(bouton, id) { 
  var div = document.getElementById(1);
  if(div.style.display=="none") { 
    div.style.display = "block"; 
    bouton.innerHTML = "-"; 
  } else { 
    div.style.display = "none"; 
    bouton.innerHTML = "+";
  }
}
</script>
</head>

<body>
	
<h1>Toutes les citations</h1>	
	
<?php

try{$bdd = new PDO('mysql:host=localhost;dbname=turris;charset=utf8', 'root', 'root', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));}catch(Exception $e){die('Erreur : '.$e->getMessage());}


$reponse = $bdd->query('SELECT * FROM citations');
while ($donnees = $reponse->fetch())

{
?>	

	<p>
	 
	<?php echo nl2br($donnees['quote']);?>
	<br>
	<div id="1" style="display:none;">
	<?php echo $donnees['prenom'];?> <?php echo $donnees['nom'];?>
	</div>
	<button type="button" onclick="toggle_div(this,'1');">+</button>
	
	
	</p>
	
	
<?php
}

$reponse->closeCursor(); 
?>	
</body>
</html>

Le problème c'est que tous les boutons "+" ont le même effet: afficher "nom" et "prenom" de la première boucle, alors qu'ils sont placés sur les boucles suivantes

-
Edité par Anonyme 13 janvier 2018 à 0:37:53

Baylock

13 janvier 2018 à 12:17:41

Ton while va créer plusieurs paragraphes avec plusieurs sets de données mais chacune de ces sets a le même id en css, autrement dit 1.

Donc, quand, dans ton javascript, tu demandes de modifier le CSS de tout ce qui a un id égal à 1, il va modifier la div ayant l'id égal à 1 dans absolument tous les paragraphes.
Ce qui fait que ton javascript n'est pas sélectif.

Sans oublier qu'un id en CSS doit toujours être unique (et alphanumérique plutôt que numérique) alors que toi, tu donne le même id numérique à plusieurs divs.

Voici une version qui fonctionnera sans trop devoir chambouler ton code de départ (c'est pas forcément le plus propre):

<html>

	<head>
		
		<script type="text/javascript">
		    function toggle_div(bouton,id) {
		        var donnees = document.getElementById(id);
		
		        if(donnees.style.display=="none") {
		            donnees.style.display = "block";
		            bouton.innerHTML = "-";
		        } else {
		            donnees.style.display = "none";
		            bouton.innerHTML = "+";
		        }
		    }
		</script>
	
	</head>
	 
	<body>
	     
	    <h1>Toutes les citations</h1>  
	     
        <?php
        try{$bdd = new PDO('mysql:host=localhost;dbname=turris;charset=utf8', 'root', 'root', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));}catch(Exception $e){die('Erreur : '.$e->getMessage());}
        $reponse = $bdd->query('SELECT * FROM citations');
	    $x=1;
        while ($donnees = $reponse->fetch())
        {
            ?>  
            <p>
                <?php echo nl2br($donnees['quote']);?>
                <br/>
                <div id="donnees_<?php echo $x; ?>" style="display:none;">
                <?php echo $donnees['prenom'];?> <?php echo $donnees['nom'];?>
                </div>
                <button type="button" onclick="toggle_div(this,'donnees_<?php echo $x; ?>');">+</button>
            </p>
            <?php
            $x++;
        }
        $reponse->closeCursor();
        ?> 

	</body>
	
</html>

Chaque div a une id unique et donc ton script sera sélectif de manière à ce que le click d'un bouton n'affiche que le contenu de la div qui a cet id unique.

-
Edité par Baylock 13 janvier 2018 à 13:34:08

Anonyme

13 janvier 2018 à 18:45:01

Wah, merci.

J'avoue que j'ai pas encore appris le js, je viens d'aller chercher des bouquins à la BU et je vais bosser pour améliorer tous ça, en attendant c'est un super coup de main pour pouvoir envoyer un premier jet du site bientôt.

Baylock

13 janvier 2018 à 21:59:42

Avec plaisir.