Charger contenu dynamic à la selection

markaz Messages postés 357 Statut Membre -
tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention - 1 oct. 2012 à 13:46

Bonjour, je suis sur un site dynamique lié à une BD qui affiche une catégorie d'article et au click charge toutes les sous catégories liées à la catégorie sélectionnée.
J'explique mieux:
dans mon BD j'ai deux tables 'CATEGORIER' (qui contient les catégories d'articles) et 'SOUS CATREGORIE' (qui contient les sous catégories d'articles).
sur ma page, j'affiche les catégorie par un while (condition).
Je voudrais donc afficher les sous catégorie liées à la catégorie au click du nom de celle-ci.

L'affichge devient un peu comme une arborescence.
Exemple:
>Catégorie1
- Sous-catégorie1
- Sous-catégorie2
- Sous-catégorieN
>Catégorie2
>Catégorie3
>CatégorieN

Comment faire?

Merci d'avance pour votre aide.

Afficher la suite

6 réponses

tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

Il faut faire passer l'id de la catégorie dans la div concerné.

<script language="javascript" type="text/javascript">
function bascule(elem)
   {
   etat=document.getElementById(elem).style.display;
   if(etat=="none"){
   document.getElementById(elem).style.display="block";
   }
   else{
   document.getElementById(elem).style.display="none";
   }
   }
</script>

<a onclick="bascule('boite1'); return false;">categorie 1</a>
<div id='boite1' style='display:none;'>
Sous cat 1
Sous cat 2
</div>

<a onclick="bascule('boite2'); return false;">categorie 2</a>
<div id='boite2' style='display:none;'>
Sous cat 1
Sous cat 2
</div>

Dans la fonction lancé par onclick ainsi que dans le div, il faut y faire passer le numéro de la catégorie "boiteid"

markaz Messages postés 357 Statut Membre 5

Le problème avec cette méthode c'est que l'id (boiteid) n'est pas dynamique alors que je veux faire un truc dynamique.
0

tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

Il ni y a pas de problème avec cette méthode après tout dépend comment elle est utilisé...

while(){
echo '<a onclick="bascule(\'boite'.$id_categorie.'\'); return false;">'.$nom_categorie.'</a>
<div id=\'boite1'.$id_categorie.'\' style=\'display:none;\'>
'.$nom_sous_categorie.'<br/>
</div>';
}

Réponse 2 / 6
maka54 Messages postés 721 Statut Membre 80

Bonjour,

tu peux faire çà avec de l'ajax
0
1. markaz Messages postés 357 Statut Membre 5
  
  AJAX serait la méthode adaptée mais je ne la maîtrise pas donc mon champ d'intervention est limité. N'y a t-il pas une autre possibilité?
  
  0
Réponse 3 / 6
tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

Salut,

Il faut faire une seconde boucle while à l'intérieure de la première (l'idéal serait quand même une jointure) pour récupérer les sous catégories de chaque catégories. L'ensemble des sous catégories d'une catégorie doivent être placés dans un "div" caché (display:none) et lors du clique sur la catégorie, le "div" caché passe en visible (display:block) et pour ça il faut utiliser un poil de javascript.
0
1. markaz Messages postés 357 Statut Membre 5
  
  J'ai éssayé mais le souci avec cette méthode c'est que l'id de la DIV reste le même du coup il y a problème d'affichage.
  
  0

maka54 Messages postés 721 Statut Membre 80

poste ton code actuel

markaz Messages postés 357 Statut Membre 5

Voici mon code actuel:
Script Javascript et css

<script type="text/javascript">
	function affichercacher ()
	{
		if (addr.id == "afficher")	addr.id = "cacher";
		else			addr.id = "afficher";
	}
	
	window.onload = function () {
		addr = document.getElementById("afficher");
	}
</script>
<style type="text/css">
#afficher {	visibility : hidden;	}
#cacher {	visibility : visible;	}
</style>

Code PHP

<?php do { ?>

<div onmousedown="affichercacher();"><?php echo $drcategorie['titrecategorie']; ?>
   <?php
        $sqlsouscategorie = ('select * from categorie, souscategorier  where categorie.idcateg = souscategorier.idcateg');
		$rsouscateg= mysql_query($sqlsouscategorie) or die ('Erreur '.$sqlsouscategorie.' '.mysql_error());
		 $result = mysql_fetch_assoc($rsouscateg);
     do { ?>
	<div id="afficher"><?php echo $result['titresouscategorier'];?></div>
    <?php } while( $result = mysql_fetch_assoc($rsouscateg)) ?>
</div> <?php } while($drcategorie= mysql_fetch_assoc($rcategorie))?>

NB: Mes requête sont déjà faites.
Le résultat : une seul ligne envoyé ( la première de la table sous catégorie).

markaz Messages postés 357 Statut Membre 5

Aidez SVP, j'attend votre aide pour continuer.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

Alain_42 Messages postés 5413 Statut Membre 904

une piste: je n'ai pas testé il peut y avoir des bugs

<script type="text/javascript">
	function affichercacher (id_div){
		//on va d'abord cacher la sous categorie éventuellement affichée 
		var divs = document.getElementsByTagName('div');
		for (var i = 1, i <= divs.length ; i++) {
			if(divs[i].id.substr(0,8)=='sous_cat_'){
				document.getElementById('sous_cat_'+i).style.display='none';
			}
		}
		//on affiche la sous cat voulue
		var div_a_afficher=document.getElementById(id_div);
		div_a_afficher.style.display='block';
	}
	
	
</script>
<style type="text/css">
.sous_cat{
	margin-left:30px;
}
</style>



Code PHP

<?php
	$id=1;
 do { 
	
?>

<div onmousedown="affichercacher('sous_cat_<?php echo $id; ?>');"><?php echo $drcategorie['titrecategorie']; ?>
   <?php
        $sqlsouscategorie = ('select * from categorie, souscategorier  where categorie.idcateg = souscategorier.idcateg');
		$rsouscateg= mysql_query($sqlsouscategorie) or die ('Erreur '.$sqlsouscategorie.' '.mysql_error());
		 $result = mysql_fetch_assoc($rsouscateg);
     do { 
		//on va mettre un div different pour chaque categorie grage au compteur $id
		echo '<div id="sous_cat_'.$id.'" class="sous_cat">'.$result['titresouscategorier'].' style="display:none;"</div>';
		$id++;
    } while( $result = mysql_fetch_assoc($rsouscateg)) ?>
</div> <?php } while($drcategorie= mysql_fetch_assoc($rcategorie))?>

markaz Messages postés 357 Statut Membre 5

Merci Alain_42 mais le code bug, et l'affichage des sous catégorie n'est pas faite.
0

Alain_42 Messages postés 5413 Statut Membre 904

je vois que tu utilises firefox alors va voir dans la console d'erreur pour voir les pb javascript

et regardes dans le code source de la page pour voir si toutes les cat et sous cat sont bien codées

Alain_42 Messages postés 5413 Statut Membre 904

bon mon code ne marche pas, j'avait fait un peu n'importe quoi, ci dessous un exemple qui fonctionne avec des catégories et sous cat en dur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<script type="text/javascript">
	function affichercacher (id_div){
		//// on va d'abord cacher la sous categorie éventuellement affichée 
		//recherche de tous les div du document et mise dans un array "divs"
		divs= new Array();
		 divs = document.getElementsByTagName('div');
		
		 //on parcours tout cet array
		for (var i = 0;i < divs.length ; i++) {
			 //recherche des div qui ont un id commençant par sous_cat_
			if(divs[i].id.substr(0,9)=='sous_cat_'){
			//si c'est le cas on masque le div eventuelement ouvert
				document.getElementById(divs[i].id).style.display='none';
			}
		}
		/////
		////// puis on affiche la sous cat voulue
		var div_a_afficher=document.getElementById(id_div);
		div_a_afficher.style.display='block';
	}
	
	
</script>
<style type="text/css">
.sous_cat{
	margin-left:30px;
}
</style>


</head>
<body>
<div onmousedown="affichercacher('sous_cat_0');">Categorie 1
	<div id="sous_cat_0" class="sous_cat" style="display:none;" >
		- sous_categorie 1-1<br />
		- sous_categorie 1-2<br />
		- sous_categorie 1-3<br />
		
	</div>
</div>
<div onmousedown="affichercacher('sous_cat_1');">Categorie 2
	<div id="sous_cat_1" class="sous_cat" style="display:none;" >
		- sous_categorie 2-1<br />
		- sous_categorie 2-2<br />
		- sous_categorie 2-3<br />
		- sous_categorie 2-4<br />
		
	</div>

</div>
<div onmousedown="affichercacher('sous_cat_2');">Categorie 3
	<div id="sous_cat_2" class="sous_cat" style="display:none;" >
		- sous_categorie 3-1<br />
		- sous_categorie 3-2<br />	
		
	</div>

</div>

</body>
</html>

par contre dans la partie code php qui genere les cat et sous cat dynamiquement mets $id=0;

tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

Jolie code :).

2 questions :

1-Pourquoi le div qui englobe un ensemble de sous catégories se termine justement sous le div de la sous catégorie?
2-Pourquoi onmousedown et pas un onclick?
0
Alain_42 Messages postés 5413 Statut Membre 904

onmousedown pour conserver ce qu'a prévu markaz

et pour répondre à ta q 1, il faut bien fermer le div pour avoir la zone cliquable uniquement sur cette catégorie

avec des ul li ce cerait mieux, mais idem j'ai conservé ce que markaz avait initié
0
tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

oki, merci pour les explications :).
0

Charger contenu dynamic à la selection

6 réponses

Discussions similaires

Newsletters