Requêtes SQL dans du JavaScript

Version imprimable

Bonjour,

J'ai une base de donnée qui contient des catégories et des articles:
|-Catégorie Maquillage
|---Enfant
|---Adulte
|-Catégorie Massage
|---Dos
|---Jambes
Etc...ect..

J'ai un code javascript configuré manuellement avec des catégories et articles:
http://www.ssb-france.com/shop/site/beta.php

Voici son code :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*
SCRIPT TROUVE SUR L'EDITEUR JAVASCRIPT
*/
 
document.write('<STYLE TYPE="text/css">\na.mv2style {color:#5c5c5c;text-decoration:none;font: 13px/1.1em Trebuchet MS, Trebuchet, Arial, Helvetica, Verdana, Georgia, sans-serif;}\na:hover.mv2style {color:;text-decoration:underlined;}\n</STYLE>');
 
mv2_menu = new Array();
mv2_lien = new Array();
 
mv2_menu[0] = '+ Soins du visage';
mv2_menu[1] = '+ Soins du corp';
mv2_menu[2] = '+ Epilation';
mv2_menu[3] = '+ Maquillage';
mv2_menu[4] = '+ Manucure';
mv2_menu[5] = '+ Forfaits mariée';
 
puce = '<img border="0" src="images/index/puce.gif" style="margin-left:8px;margin-right:4px" vspace="2">';
 
mv2_lien[0] = ''
mv2_lien[1] = ''
mv2_lien[2] = ''
mv2_lien[3] = ''
mv2_lien[4] = ''
mv2_lien[5] = ''
mv2_lien[0] += '<A HREF="visage1.html" CLASS=mv2style>'+puce+'visage1</A><BR>';
mv2_lien[0] += '<A HREF="visage2.html" CLASS=mv2style>'+puce+'visage2</A><BR>';
mv2_lien[1] += '<A HREF="corp1.html" CLASS=mv2style>'+puce+'soins du crop 1</A><BR>';
mv2_lien[2] += '<A HREF="a.html" CLASS=mv2style>'+puce+'AA</A><BR>';
mv2_lien[2] += '<A HREF="b.html" CLASS=mv2style>'+puce+'BBBB</A><BR>';
mv2_lien[3] += '<A HREF="c.html" CLASS=mv2style>'+puce+'CCC</A><BR>';
mv2_lien[4] += '<A HREF="dsss.html" CLASS=mv2style>'+puce+'DSSS</A><BR>';
mv2_lien[5] += '<A HREF="kks.html" CLASS=mv2style>'+puce+'AAAs</A><BR>';
 
 
mv2_pos = -1;
 
function mv2_menu_draw()
	{
	mv2_aff = "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=182><TR><TD><TABLE BORDER=0 CELLPADDING=03 CELLSPACING=1 WIDTH=100%>";
 
	for(a=0;a<mv2_menu.length;a++)
		{
		if(mv2_pos == a || !document.getElementById)
			bgcolor = "none";
		else
			bgcolor = "none";
	if(document.getElementById)
			mv2_aff += "<TR><TD ><A HREF=\"#\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Verdana\" SIZE=2>"+mv2_menu[a]+"</FONT></A></TD></TR>";
		else
			mv2_aff += "<TR><TD ><FONT FACE=\"Verdana\" SIZE=2 COLOR=#FFFFFF>"+mv2_menu[a]+"</FONT></TD></TR>"
	if(mv2_pos == a || !document.getElementById)
			mv2_aff += "<TR><TD ><FONT FACE=\"Verdana\" SIZE=1>"+mv2_lien[a]+"</FONT></TD></TR>";
		}
 
	mv2_aff += "</TABLE></TD></TR></TABLE>";
	if(document.getElementById)
		document.getElementById("mv2").innerHTML = mv2_aff;
	else
		document.write(mv2_aff);
	}
 
mv2_menu_draw();

Je voudrais savoir si il est possible de générer les catégories & articles de ma base de donnée (par requête SQL par exemple?) dans ce code javascript?
Ainsi a chaque nouvelle catégorie ou article je ne devrais pas aller chaque fois manuellement éditer le programme java.

Merci.

EDIT : Je viens de me documenter un petit peu plus et j'ai entendu parler de AJAX et de XML (des mots qui font peur!). Est-ce le bon chemin...?

02/11/2008, 09h25
sabotage

Effectivement Ajax est la bonne piste.

Je te propose de lire cela :
http://amillet.developpez.com/tutori...jax-prototype/

Tu sauras comment executer un page php avec des paramètres provenant de javascript.
02/11/2008, 13h44
Niki59

Woaw ce n'est vraiment pas facile, je ne sais pas par où commencer même en ayant relu la documentation. Je suis débutant en php et un ignare en javascript.

Est-ce que quelqu'un peut me donner un bout de piste? Merci.
02/11/2008, 13h48
sabotage

Excuse moi, je ne t'ai pas donné le bon lien
http://siddh.developpez.com/articles/ajax/

La ca sera plus clair pour ce que tu veux faire.
02/11/2008, 14h30
Niki59

Merci c'est (un peu) plus clair.
Voici ce que j'ai fait :
Ma page

Mais c'est en SELECT BOX là! Y'a t-il possibilité de tous les énumérer sans avoir à les sélectionner ? Par exemple quand je survole une categorie et bien sa liste de produit s'enumère ?

Le code source est au chapitre IV :
http://siddh.developpez.com/articles/ajax/

J'ai juste changé les tables MySQL pour les miennes.

Problème résolu, je suis passer par un tout autre chemin. Si jamais la solution interesse quelqu'un :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<HEAD>
<script type="text/javascript">
	/*
	* Montre / Cache un div
	*/
	function DivStatus( nom, numero )
		{
			var divID = nom + numero;
			if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
				{
					Pdiv = document.getElementById( divID );
					PcH = true;
		 		}
			else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
				{
					Pdiv = document.all[ divID ];
					PcH = true;
				}
			else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
				{
					Pdiv = document.layers[ divID ];
					PcH = true;
				}
			else
				{
 
					PcH = false;
				}
			if ( PcH )
				{
					Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
				}
		}
 
	/*
	* Cache tous les divs ayant le même préfixe
	*/
	function CacheTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != 'cachediv' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
		}
 
	/*
	* Montre tous les divs ayant le même préfixe
	*/
	function MontreTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							if ( SetDiv && SetDiv.className != '' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != '' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != '' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
		}
 
	/*
	* Inverse les divs: Cache les divs visible et montre le divs cachés :)
	*/
	function InverseTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv ) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							DivStatus( nom, NumDiv );
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							DivStatus( nom, NumDiv );
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							DivStatus( nom, NumDiv );
							NumDiv++;
						}
				}
		}
</script>
<style type="text/css">
	.cachediv {
		visibility: hidden;
		overflow: hidden;
		height: 1px;
		margin-top: -1px;
		position: absolute;
	}
 
 
.unnamed1 {
	cursor: pointer;
}
 
</style>
	<link rel="stylesheet" type="text/css" href="fbe/css/index.css" />
</HEAD>
<BODY>
 
<?php include 'config.php';?>
<?php
			$query_categories = mysql_query("SELECT `id`,`nom` FROM categories")or die(mysql_error());
			while ($cat = mysql_fetch_array($query_categories))
			{
?>	
		<div name="menu<?php echo $cat['id']; ?>" id="menu<?php echo $cat['id']; ?>">
			<TABLE BORDER="0" CELLPADDING="03" CELLSPACING="1" WIDTH="100%">
				<TR><TD><div class="unnamed1" onClick="javascript:DivStatus( 'menu', '<?php echo $cat['id']; ?>1' )" ><FONT FACE="Verdana" SIZE=2>+ <?php echo $cat['nom']; ?></font></div></TD></TR>
			</TABLE>
		</div>
 
<?php
 
?>			
		<div name="menu<?php echo $cat['id']; ?>1" id="menu<?php echo $cat['id']; ?>1" class="cachediv">
			<div class="unnamed1" >
			<?php
			$query_products = mysql_query("SELECT `nom` FROM products WHERE `cat` = '".$cat['id']."'")or die(mysql_error());
			while ($product = mysql_fetch_array($query_products))
			{
			?>
			<TABLE BORDER="0" CELLPADDING="03" CELLSPACING="1" WIDTH="100%">
				<TR><TD><A href="admin.php?action=cat" CLASS=mv2style><FONT FACE="Verdana" SIZE=1>-> <?php echo $product['nom']; ?></FONT></A></TD></TR>
			</TABLE> 
			<?php } ?>
			</div>
		</div>
		<?php } ?>				
 
 
 
</BODY>