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

Version imprimable

24/03/2011, 17h57
xavioche77

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

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 ?

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:

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:

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:

$('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:

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.

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:

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:

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

25/03/2011, 12h38
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.
25/03/2011, 13h06
xavioche77

j'ai rajouter ca dans le css:

.show {
display: block;
}

.hide { display: none; }
25/03/2011, 17h31
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

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 :aie:

Voici un code fonctionnel:

Code:

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>

25/03/2011, 18h05
xavioche77

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
25/03/2011, 18h13
Benjamin Delespierre

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
25/03/2011, 18h27
xavioche77

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é.

Citation:

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:

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 :)

25/03/2011, 19h18
xavioche77

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

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:

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.

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:

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>