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 :
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 : 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
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)
- page 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
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; }
Merci beaucoup pour votre aide !!!
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
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); ?>
ps : n'hésitez pas à tester le code
Partager