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

27 décembre 2009 à 11:44:47

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 :

Image utilisateur

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

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="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)

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

Tillertan

27 décembre 2009 à 23:23:20

A priori c'est que tu appliques tes event au chargement de la page, or l'ajax n'est pas mis, et donc ce que tu affiches après par ajax n'a pas d'évenement.

Tu ne faut mettre les onclick and co une fois la réponse de l'ajax écrite.

SpiderNéo

28 décembre 2009 à 11:45:43

Bonjour,
Tout d'abord merci pour ta réponse.

Non ce n'est pas ça. J'ai essayé de mettre le code javascript après l'affichage du tableau et ça a fait pareil.

En fait c'est une histoire de niveau dans le DOM.

Le résultat de l'AJAX (le tableau) arrive dans un <div> </div>.
Or je ne sais pas comment y accéder après.

Tillertan

28 décembre 2009 à 11:53:13

Citation : SpiderNéo

Non ce n'est pas ça. J'ai essayé de mettre le code javascript après l'affichage du tableau et ça a fait pareil.

Tu veux dire mettre après ton ajax ce morceau ligne pour ligne ?

$(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();
}
)



});

SpiderNéo

28 décembre 2009 à 12:25:02

Oui, c'est ce que j'ai fait.

J'ai rajouté à la fin de la page AJAX :

echo "<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>";

Tillertan

28 décembre 2009 à 12:53:53

ouais donc c'est normal que ça marche pas.

function stateChanged()
{
	if (xmlhttp.readyState==4)
	{
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		
		$('.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();
		
		}
}

SpiderNéo

28 décembre 2009 à 12:58:30

Je viens d'essayer il y a un bug JS.

Je pense que c'est du au fait qu'on mélange du JS avec des fonctions Jquery.

Il aurait fallu que je fasse tout mon appel AJAX en Jquery, là je pense que ça aurait marché.

Le truc c'est que je ne connais pas trop Jquery, j'ai l'habitude de coder mes appels AJAX de cette manière.