Probléme - Ajax - PHP/MYSQL - Accordéon Jquery

spiderneo

27 Décembre 2009 10:48:31

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/AccordionTableExample.ht*ml

Pour cela, j'ai fais le code suivant :

- Page html

<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="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" target="_blank">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquer...</a>"></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)

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

<?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

Autres pages sur : probleme ajax php mysql accordeon jquery

| Etre averti des réponses
| Alerter

Répondre à spiderneo

Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Contenus similaires :

Tom's guide dans le monde