Discussion :

[xavioche77]

Dites , j'ai envie de faire un truc mais je sais pas comment.
Je fais un système de gestion des droits.
Je voudrais qu'en enregistrant un utilisateur, on lui donne ou pas les droits d'accès a des pages du site. Ces pages sont de type menu / sous menu.

Quand on choisit un menu , plein de sous menu apparaissent.
Je les ai stockées dans la la bdd dans une seule table, avec un booléen pour savoir si la page est un menu ou un sous menu, si c'est un sous menu, je stocke l'id du menu "père".

Maintenant dans mon formulaire pr enregister l'utilisateur, j'aimerais faire un truc propre: genre on choisit le menu avec des check box et dès qu'on a coché un menu, juste en dessous, on voit les sous menus apparaitre en check box eux aussi.

Vous voyez ce que je veux dire? Si on coche la check box correspondant au menu ( père), une liste de chekbox correspondant au sous menu ( fils) apparaissent en dessous.

bon voila, mon problème: Comment faire ca ? En php ? en javascript ? en ajax ??

J'aimerais vraiment en PHP mais recharger la page c moche. Ajax je connais pas du tout, et je trouve pas vraiment de bonne infos sur le net; mais bon ca me semble le mieux.
Qu en pensez vous ?

[Benjamin Delespierre]

Hello

Il faut tenir compte d'une chose: tout le monde n'a pas activé javascript. Le formulaire de séléction doit pouvoir fonctionner intégralement en PHP, pour cela je te conseille d'afficher toutes les checkbox. Ensuite, avec JavaScript, on va introduire un look n feel un peu plus sexy en "cachant" les menus fils et en ne les montrant qu'a la selection d'un menu père.

Ta structure HTML devra donc ressembler à quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<ul id="menu_selection">
  <li><input type="checkbox" name="menu[]" value="1" />Menu 1
    <ul>
       <li><input type="checkbox" name="menu[]" value="2" />SS Menu 1 1</li>
       <li><input type="checkbox" name="menu[]" value="3" />SS Menu 1 2</li>
       <li><input type="checkbox" name="menu[]" value="4" />SS Menu 1 3</li>
  </li>
  <li><input type="checkbox" name="menu[]" value="5" />Menu 2
    <ul>
       <li><input type="checkbox" name="menu[]" value="6" />SS Menu 2 1</li>
       <li><input type="checkbox" name="menu[]" value="7" />SS Menu 2 2</li>
       <li><input type="checkbox" name="menu[]" value="8" />SS Menu 3 3</li>
  </li>
</ul>

En JavaScript, on préférera se servir de jQuery pour s'éviter un sérieux mal de tête et on ira faire quelque chose qui ressemble à ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$(function (){
  $('ul#menu_selection li ul').addClass('hide');
 
  $('ul#menu_selection li input[type="checkbox"]).click(function () {
     $(this).find('ul').toggleClass('hide');
  });
});

Donc résumons bien,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('ul#menu_selection li ul').addClass('hide');

sert à cacher les "sous-menus", c'est à dire les <ul> qui se trouvent sous des <li>.
Et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$('ul#menu_selection li input[type="checkbox"]).click(function () {
     $(this).find('ul').toggleClass('hide');
  })

Sert à les réafficher lors du click.

[xavioche77]

Merci, j'ai essayé, je continue a réfléchir dessus.
Pour le moment, j'ai bien afficher l'arborescence: menu et en dessous tout les sous menus liés. Mais je javascript ne fonctionne pas, il ne se passe rien.


Le javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<script type="text/javascript" language="javascript" src="../../_modele/js/js.js"></script>
<script type="text/javascript" language="javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="../../_modele/js/jquery.textarearesizer.compressed.js"></script>
<script type="text/javascript" language="javascript" src="../../_modele/js/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" language="javascript" src="../../_modele/js/autocomplete/jquery.autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="../../../js/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="../../../js/ui.datepicker-fr.js"></script>
<script type="text/javascript" language="javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript">
    function afficher_magasin(id) {
	var X = 640;
	var Y = 480;
	var Left = (screen.width  - X) / 2;
	var Top  = (screen.height - Y) / 2;
	the_URL = "magasin.php?id=" + id + "&modif_conseiller=1";
	var fen = window.open(the_URL,"tarif_fournisseur","toolbar=no,status=no,location=no,resizable=yes,scrollbars=yes,copyhistory=0,menubar=no,width=" + X + ",height=" + Y + ",left=" + Left + ",top=" + Top);
	fen.focus();
    }
 
	$(function (){
  $('ul#menu_selection li ul').addClass('hide');
 
  $('ul#menu_selection li input[type="checkbox"]').click(function () {
     $(this).find('ul').toggleClass('hide');
  });
});

Le php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<table border="0" align="left" cellpadding="2" cellspacing="1" class="tableau">
<tr>
	<th align="center" nowrap>Catégories :</th>
	<?php
				$sql ="SELECT nom,page,id_eap FROM menu_eap WHERE menu = 1"; // selectionne les menus
   sql_mysql_query($sql,"test");
 
echo '<ul id="menu_selection">';
 
while ($row1 = mysql_fetch_object($query_test)) {	
		echo '<tr>';
		echo '<td>';
 
		echo '<li>';
		echo '<input type="checkbox" name="menu[]" value='.$row1->page.'/>'.$row1->nom; 
		echo '<ul>';
 
			$sql ="SELECT nom,page FROM menu_eap WHERE sous_menu = 1 and id_cat_pere='$row1->id_eap'"; //selectionne les ss menus du menu pere
			sql_mysql_query($sql,"test2");
			while ($row2 = mysql_fetch_object($query_test2)) {
			echo '<li>';
			echo '<input type="checkbox" name="menu[]" value='.$row2->page.'/>'.$row2->nom; 
			echo '</li>';
 
 
}
		echo '</td>';echo '</tr>';
 
	}
 
		?>	
 
			</table>

Je ne sais pas ou est le problème. Jquery mal appelé, erreur de code .

Autrement, je pourrais peut être faire un truc plus simple, je sais pas trop non plus comment m'y prendre. Quand l'on coche une catégorie père, par défaut tous les fils en dessous se cochent. C'est peut être plus simple mais moins joli, je ne sais pas

[Benjamin Delespierre]

Tu as bien pensé à mettre la classe CSS 'hide' quelque part ? Sinon, puisque tu utilise la jQuery-ui, remplace donc cette classe par ui-helper-hidden.

[xavioche77]

j'ai rajouter ca dans le css:

.show {
display: block;
}

.hide { display: none; }

[xavioche77]

c'est censé fonctionner maintenant?? Parce que ca n'affiche que les menus pères et fils sans qu'on puisse les cacher ou pas