formulaire dynamique, conception j'hésite PHP / AJAX /JS

**xavioche77** · 24/03/2011, 17h57

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** · 24/03/2011, 18h15

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** · 25/03/2011, 10h32

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** · 25/03/2011, 12h38

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** · 25/03/2011, 13h06

j'ai rajouter ca dans le css:

.show {
display: block;
}

.hide { display: none; }

**xavioche77** · 25/03/2011, 17h31

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

**Benjamin Delespierre** · 25/03/2011, 17h41

Désolé il y avait une erreur dans le script js que je t'ai passé, il falait remonter au parent lors du clic car il porte sur input

Voici un code fonctionnel:

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
35
36
37
38
39
40
41
42
43
44
45
 
<html>
	<head>
		<script src="http://www.google.com/jsapi"></script>  
		<script type="text/javascript">  
 
			 // Load jQuery  
			 google.load("jquery", "1.2.6");  
 
			 google.setOnLoadCallback(function() {  
			 });  
 
		 </script> 
		 <script>
			$(function (){
			  $('ul#menu_selection li ul').addClass('hide');
 
			  $('ul#menu_selection > li input[type="checkbox"]').click(function () {
				 $(this).parent().find('ul').toggleClass('hide');
			  });
			});
		 </script>
		 <style type="text/css">
			.hide { display: none; }
		 </style>
	</head>
	<body>
		<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>
			</ul>
		  </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>
			</ul>
		  </li>
		</ul>
	</body>
</html>

**xavioche77** · 25/03/2011, 18h05

cool
ca fonctionne
je te remercie énormément
Merci

Je n'ai plus qu' a remettre en forme en mettant une tabulation pour les menus fils

**Benjamin Delespierre** · 25/03/2011, 18h13

voilà, ensuite ça pourrait être pas mal de mettre des puces (+) et (-) sur la liste pour donner un peu plus de classe

Je ne sais pas si tu as remarqué mais le script que je t'ai passé utilise l'API google pour charger jQuery, cette méthode est conseillée car d'une part elle réduit la charge de ton serveur (quelques kb en moins c'est toujours ça de pris) et d'autre part si un utilisateur l'a déjà dans son cache en étant passé par un autre site qui utilise la même technique, le chargement n'en sera que plus rapide.

A lire a toute fin utile: http://www.tvidesign.co.uk/blog/impr...lent-tips.aspx

**xavioche77** · 25/03/2011, 18h27

Merci pr tt,

et juste pour abuser, ce serait possible de faire quelque chose comme si on coche le menu père , tous les menus fils qui apparaissent ensuite soient déjà coché par défaut?
Je vais lire le lien que tu m'as passé.

**Benjamin Delespierre** · 25/03/2011, 18h40

et juste pour abuser, ce serait possible de faire quelque chose comme si on coche le menu père , tous les menus fils qui apparaissent ensuite soient déjà coché par défaut?

It's easy.

Code :

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

1
2
3
4
5
6
 
$('ul#menu_selection > li input:checkbox').click(function () {
 $(this).siblings('ul').toggleClass('hide').find('input:checkbox').each(function (i, item) {
	$(item)[0].checked = !$(item)[0].checked;
 });
});

C'est beau non jQuery

**xavioche77** · 25/03/2011, 19h18

c est un truc de fou.
bon je vais apprendre a en faire tt seul.
merci

**xavioche77** · 31/03/2011, 12h52

Bon j'ai appris un peu le jquery. J'ai fait quelques fonctions pour mes formulaires ( par exemple un bouton: "cocher toute les cases", ce genre de choses).
Je viens de voir que j'ai un petit soucis avec le code précédent.

Quand je clique sur un menu père, tout les menus fils apparaissent mais décochés.
Par contre avec cette liste menu père et menu fils associés, si je dé clique le menu père , tout les menu fils se cochent.

J'essaye de faire en sorte que quand on clique sur le menu père la première fois, tout les menus fils s'affichent mais tous cochés.

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
		<script type="text/javascript">  
 
			 // Load jQuery  
			 google.load("jquery", "1.2.6");  
 
			 google.setOnLoadCallback(function() {  
			 });  
 
		 </script> 
 
		 <script type="text/javascript">
			$(function (){
			  $('ul#menu_selection li ul').addClass('hide');
 
			  $('ul#menu_selection > li input[type="checkbox"]').click(function () {
				 $(this).parent().find('ul').toggleClass('hide');
 
$('ul#menu_selection > li input:checkbox').click(function () {
 $(this).siblings('ul').toggleClass('hide').find('input:checkbox').each(function (i, item) {
	$(item)[0].checked = !$(item)[0].checked;
 });
});
 
 
			  });
			});
 
 
		 </script>
 <style type="text/css">
			.hide { display: none; }
		 </style>

Surement un problème tout bète, mais j'ai fait plein d'essai en vain.

**xavioche77** · 31/03/2011, 13h00

OhOhOh

Ben j'ai trouvé.
Il fallait enlever toggleClass('hide') dans la deuxième partie.

Donc code fonctionnelle pour afficher menu père et menu fils associés en cochant de base tous les check box quand la menu père est cliqué.

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
 
<script type="text/javascript">  
 
			 // Load jQuery  
			 google.load("jquery", "1.2.6");  
 
			 google.setOnLoadCallback(function() {  
			 });  
 
		 </script> 
 
		 <script type="text/javascript">
			$(function (){
			  $('ul#menu_selection li ul').addClass('hide');
 
			  $('ul#menu_selection > li input[type="checkbox"]').click(function () {
				 $(this).parent().find('ul').toggleClass('hide');
 
 
			$(this).siblings('ul').find('input:checkbox').each(function (i, item) {
					$(item)[0].checked = !$(item)[0].checked;
						});
 
 
 
			  });
			});
 
 
		 </script>
 <style type="text/css">
			.hide { display: none; }
		 </style>

formulaire dynamique, conception j'hésite PHP / AJAX /JS

Langage PHP

Discussions similaires

Partager

Partager