• imprimer
  • aide

Forum de discussions « Javascript - DHTML - VBScript »

Retrouvez les publications relatives à ces discussions dans notre rubrique javascript.

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

liste des forums liste des discussions Participer à la discussion

Photo de SpiderNeo Message publié le dimanche 27 décembre 2009 - 11h12 par SpiderNeo.
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 :


[IMG]http://img685.imageshack.us/img685/2056/pbaajx.jpg[/IMG]

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

[CODE] <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> [/CODE]


- Page javascript (ou ajax)
[CODE] 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; } [/CODE]

- page PHP
[CODE] <?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); ?> [/CODE]

Merci beaucoup pour votre aide !!!

ps : n'hésitez pas à tester le code
Photo de nours312 Message publié le lundi 28 décembre 2009 - 12h53 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
1. Je ne vois pas le rapport avec l'acordéon Jquery .... ni l'interet d'envisager l'utilisation de Jquery ...

2. dans l'état ton code est illisible !... donc, si tu n'a pas corrigé ça, c'est soit, que tu n'a pas osé virer ton bbcode, soit que tu ne t'en est pas rendu compte (n'a pas relu ton message et n'est pas revenu depuis, et dans ce cas ... ben, on va pas répondre dans le vide !)

3. ce que tu cherches à faire est trés simple !... on peux te donner la méthodologie, les fonctions JS à employer, ..., ... il suffit de le demander ;)

+
Photo de SpiderNeo Message publié le lundi 28 décembre 2009 - 17h16 par SpiderNeo.
Bonjour,
Tout d'abord merci pour ta réponse.

1. Ben l'accordéon c'est histoire de cacher (ou rendre visible) les lignes de détails.

2. Oui j'ai vu que mon code était illisible. Mais je n'ai rien trouvé pour modifier mon post. Si tu sais comment le faire, je voudrais bien le savoir.

3. Ben, je demande pas mieux lol, parce que à ce jour, je n'ai toujours pas résolu mon problème !

Encore merci.
Photo de nours312 Message publié le lundi 28 décembre 2009 - 19h44 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
1. pour remplacer l'acordéon, tu as le principe

Element.style.display = "block" / "none" qui est une fonction JS simple pour modifier le CSS

Sinon, tu peux aussi faire une fonction qui se lance toutes les x millisecondes et qui aura pour fonction d'agrandir ta fenetre (en partant de 0 et en allant jusqu'à se taille max (c'est ce que font tous les scripts et lib que tu pourra trouver, à la différence près que ce sera plus léger, vu qu'il n'y a pas de fioritures ...

2. Bon, ... modifier le post, c'est une fonction que l'on réclame depuis des années, mais qui n'est pas accéssible sur ce forum ... par contre, tu aurais pu reposter sans mettre les bbCodes ... ou en les mettant en minuscule !... c'est comme ça qu'ils fonctionnent !...

3. un formulaire .

<form action='maPage.php' onsubmit="FonctionJS()"> <input type="text" name="dateDebut"/> <input type="text" name="dateFin"/> </form> <div id="zoneTable"/>

du Javascript aidé par la lib prototype :
var FonctionJs = function(event){ event.stop(); // évite d'uploder le formulaire this.request({onComplete : function(xhr){ $('zoneTable').innerHTML = xhr.responseText; }}); //cette fonction de Prototypes " Form.request()"crée automatiquement une requete Ajax du formulaire et renvoi le résultat dans la fonction onComplete }

après, tu peux fouiller dans le code ainsi généré pour récupérer les image dont la class est agrandir (tes croix) pour y mettre des écouteurs en charge d'ouvrir ce que tu appelé l'accordéon

en considérant ton code HTML de la sorte :

<div class="Row"> <img class="agrandir" src="plus.png"/> nom de la ligne .. .. <div class="masquable"> contenu à masquer </div> </div>

il suffit donc d'utiliser la fonction suivante (toujours Grâce à prototype) :

var loadEvent = function(containerId){ $$('#'+containerId+' .masquable').invoke('hide'); // on masque les divs.masquable $$('#'+containerId+' .agrandir').invoke('observe', 'click', function(event){ $$('#'+containerId+'.masquable').invoke('hide'); event.element().ancestors()[0].down('div').show(); // en partant de l'event, on récupère l'élément sur lequel on a clické, de là, son parent, direct, puis la première div decendante ... }); }

il suffit donc de lancer cette fonction dans la fonction onComplete après le chargement de notre Ajax ...

var FonctionJs = function(event){ event.stop(); // évite d'uploder le formulaire this.request({onComplete : function(xhr){ $('zoneTable').innerHTML = xhr.responseText; loadEvent($('zoneTable')); }}); //cette fonction de Prototypes " Form.request()"crée automatiquement une requete Ajax du formulaire et renvoi le résultat dans la fonction onComplete }

Sans oublier, bien sur, de lier Prototypes dans le <Head> de la page HTML

voila ! ;) ... amuses toi bien !... et, franchement, vu la puissance de Prototype, comparé à jQuery ... coder avec est un régal, jQuery, c'est très bien ... mais surtout pour récupérer des codes et les mettre dans la page, sans se poser la question du comment ça marche !... après, ce n'est que mon avis personnel !...

@++
Photo de nours312 Message publié le lundi 28 décembre 2009 - 19h47 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
var FonctionJs = function(event){ event.stop(); // évite d'uploder le formulaire this.request({onComplete : function(xhr){ $('zoneTable').innerHTML = xhr.responseText; loadEvent('zoneTable'); }}); }
dsl ! j'avais mis l'élément $('zoneTable') au lieux de son id ... 'zoneTable' ... :$

@+
Photo de SpiderNeo Message publié le lundi 28 décembre 2009 - 21h22 par SpiderNeo.
Bonsoir,
Merci beaucoup nours312, c'est super gentil de ta part !!!

Je vais tester ça demain à la première heure et je te tiens au courant.

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Les 5 dernières discussions