[AJAX] - Ajax - PHP/MYSQL - Accordéon Jquery
Bonjour tout le monde,
Voilà, j'ai un petit et je n'arrive pas à le résoudre.
Je vais prendre un exemple pour vous exposer le problème.
J'aimerai, à l'aide de PHP/MySQL + de l'ajax, afficher quelque chose de ce genre :
http://img685.imageshack.us/img685/2056/pbaajx.jpg
Donc, comme vous pouvez le voir sur l'image, on saisi une date de début et une date de fin et ça nous affiche un tableau automatique (grâce à ajax). Chaque ligne du tableau c'est une commande passé par un client et au clique sur le + sur le coté, on affiche le détail (le nom du client, le nom du produit et le montant)
En m'inspirant de 2 sites, j'ai essayé de le faire, mais je n'y suis pas parvenu. Je crois que c'est un problème de DOM.
Site 1 (pour hmtl, PHP, mysql et ajax) : http://www.w3schools.com/PHP/php_ajax_database.asp
Site 2 (pour l'accordeon) : http://mediaformations.com/examples/...eExample.ht*ml
Pour cela, j'ai fais le code suivant :
- Page html
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
|
<html>
<head>
<script type="text/javascript">
function lesRep()
{
vdatedeb = document.getElementById("datedeb").value;
vdatefin = document.getElementById("datefin").value;
if(vdatedeb!="" && vdatefin!="")
{
//date deb
var tabDatedeb = vdatedeb.split('/');
la_date_deb = tabDatedeb[2]+'-'+tabDatedeb[1]+'-'+tabDatedeb[0];
//date fin
var tabDatefin = vdatefin.split('/');
la_date_fin = tabDatefin[2]+'-'+tabDatefin[1]+'-'+tabDatefin[0];
req = "WHERE date BETWEEN '"+la_date_deb+"' AND '"+la_date_fin+"'";
showRep(req);
}
}
</script>
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table.CityTable th') .click(
function() {
$(this) .parents('table.CityTable') .children('tbody') .toggle();
}
)
$('table.StateTable tr.statetablerow th') .click(
function() {
$(this) .parents('table.StateTable') .children('tbody') .toggle();
}
)
});
</script>
<style type="text/css">
table.CityTable, table.StateTable{width:400px; border-color:#1C79C6; text-align:center;}
table.StateTable{margin:20px; border:3px solid #1C79C6;}
table td{padding:5px;}
table.StateTable thead th{background: #1C79C6; padding: 10px; cursor:pointer; color:white;}
table.CityTable thead th{padding: 10px; background: #C7DBF1;cursor:pointer; color:black;}
table.StateTable td.nopad{padding:0;}
</style>
</head>
<body>
<table>
<tr>
<td align="center" class="liste"><input type="text" id="datedeb" name="datedeb" size="11" maxlength="10"
class="text" onBlur="lesRep();"/></td>
<td align="center" class="liste"><input type="text" id="datefin" name="datefin" size="11" maxlength="10"
class="text" onBlur="lesRep();"/></td>
</tr>
</table>
<div id="txtHint">
</div>
</body>
</html> |
- Page javascript (ou ajax)
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
|
var xmlhttp;
function showRep(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getrep.php";
url=url+"?q="+str;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
} |
- page 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
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
|
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$sql= "SELECT * FROM commande ".$q;
$result = mysql_query($sql);
echo
'<table class="StateTable" rules="all" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td>Date de la comande</td>
<td>Nombre de produit</td>
<td>Total</td>
</tr>
<tr><td colspan="6">
';
while($row = mysql_fetch_array($result))
{
echo '
<table class="CityTable" rules="all" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width:5%">+</th>
<th style="width:20%">'.$row['date'].'</th>
<th style="width:55%">'.$row['nb_produit'].'</th>
<th style="width:20%">'.$row['total'].'</th>
</tr>
</thead>
<tbody>';
$req2 = mysql_query("SELECT * FROM detail WHERE id_commande=".$row['id']);
while($row2 = mysql_fetch_array($req2))
{
$req3 = mysql_query("SELECT * FROM user WHERE id=".$row2['id_user']);
$row3 = mysql_fetch_array($req3);
$nom= $row3['nom'];
$req4 = mysql_query("SELECT * FROM produit WHERE id=".$row2['id_produit']);
$row4 = mysql_fetch_array($req4);
$nom_produit= $row4['nom'];
$prix= $row4['prix'];
echo "<tr>";
echo "<td> </td>";
echo "<td>" . $nom. "</td>";
echo "<td>" . $nom_produit . "</td>";
echo "<td>" . $prix. "</td>";
echo "<tr>";
}
echo "</tbody>";
echo "</table>";
}
echo "</td></tr></table>";
mysql_close($con);
?> |
Merci beaucoup pour votre aide !!!
ps : n'hésitez pas à tester le code
