[AJAX] Chargement de donnée sql et affichage

Bonjour à tous,

J'aimerai lorsque je clic sur une ligne de tableau (<tr></tr>) que cela affiche d'autre lignes en dessous avec des données récupérées en SQL. seulement apart envoyé des variables en POST et GET c'est tout ce que je sais faire en AJAX.
Quelqu'un aurait il une idée de comment faire?

Concrètement j'ai un tableau php où chaque ligne est issu d'une requête SQL en php en gros cela donne (avec ce que j'aimerai):

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

<table> <tr id='ligne_1' onclick='ma_fonction_pr_afficher_la_sous_ligne'> <td></td> <td></td> <td></td> </tr> <tr id='ma_sous_ligne_1_1_que_je_veux_afficher'> <td></td> <td></td> </tr> <tr id='ligne_2' onclick='ma_fonction_pr_afficher_la_sous_ligne'> <td></td> <td></td> <td></td> </tr> <tr id='ma_sous_ligne_2_1_que_je_veux_afficher'> <td></td> <td></td> </tr> <tr id='ligne_3' onclick='ma_fonction_pr_afficher_la_sous_ligne'> <td></td> <td></td> <td></td> </tr> <tr id='ma_sous_ligne_3_1_que_je_veux_afficher'> <td></td> <td></td> </tr> <tr id='ma_sous_ligne_3_2_que_je_veux_afficher'> <td></td> <td></td> </tr> </table>

---

Dans cette fonction fonction javascript j'aimerai aller chercher des infos dans la bdd et les afficher dans les sous lignes correspondante à leurs lignes respectives.
j'ai pensé aux display none ou hidden j'ai tout suite laisser tombé car le temps de chargement de la page peut devenir vite très long.

J'ai une class AJAX pour mes get et post dois-je m'en servir pour la requête SQL?

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

function Ajax () {   //--- propriétés --- this.xhr = null ; // variable de connexion ajax this.typefic ; // variable qui contient soit "XML" soit "text" this.contenu = "" ; // contenu de la reception var s = this ;   //--- constructeur (création de l'objet de connexion --- if (window.XMLHttpRequest) { this.xhr = new XMLHttpRequest() ; } else { if (window.ActiveXObject) { this.xhr = new ActiveXObject ("Microsoft.XMLHTTP") ; } else { alert ("Votre navigateur n'est pas compatible avec Ajax") ; } }   //--- si l'objet est construit, creation de la méthode d'envoie --- if (this.xhr) {   //--- envoi vers le serveur --- this.envoi = function (nomfic, message) {   this.xhr.open("POST", nomfic, false) ; this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // this.xhr.setRequestHeader("Content-type", "charset=iso-8859-1"); this.xhr.send(message) ; }   }     }

---

Quelqu'un peut il m'aider?

Merci

Pour commencer j'ai fais ca:

Code:

---

1 2 3 4 5 6 7

function displaySubline (line) {   var contenu = "<tr><td colspan='5'>mon text</td></tr>"; document.getElementById('tablenut').innerHTML= contenu + document.getElementById('tablenut').innerHTML;   }

---

mais le probleme c est que je n arrive pas a le faire s'afficher en dessous d'une ligne précisé

il faut déjà organiser ton travail.

Tu dois construire un par un les éléments :

Commence par ton Script PHP ! il faut qu'il affiche ton retour complété avec les données SQL.

Une fois que ton Script PHP est correct et te convient. Penche toi sur le création d'une injection AJAX. (un conseil utilise JQUERY ou un autre framework). C'est plus simple pour faire les injections.

A la fin tu dois obtenir un truc de ce style.

Ta page initiale

Code:

---

1 2 3 4 5 6 7 8 9 10

<table> <tbody> <tr id='ligne_1' onclick='ma_fonction_pr_afficher_la_sous_ligne'> <td></td> <td></td> <td></td> </tr> </tbody> </table>

---

Tu click ce qui déclenche l'Ajax:

Ta requête Ajax interroge ton script PHP/SQL qui te retourne un truc de ce style.

Code:

---

1 2 3 4 5

<tr> <td> RETOUR SQL </td> <td> RETOUR SQL </td> <td> RETOUR SQL </td> </tr>

---

Ensuite il ne reste plus qu'a ta fonction Ajax d'injecter ce retour dans ton tableau pour obtenir :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<table> <tbody> <tr id='ligne_1' onclick='ma_fonction_pr_afficher_la_sous_ligne'> <td></td> <td></td> <td></td> </tr> <tr> <td> RETOUR SQL </td> <td> RETOUR SQL </td> <td> RETOUR SQL </td> </tr> </tbody> </table>

---

Quand tu dis:

Citation:

---

Envoyé par llaffont

Commence par ton Script PHP ! il faut qu'il affiche ton retour complété avec les données SQL.

---

ce sera un script php qui reçois des données en méthode POST ou en GET ?
Et il renverra les infos que je lui demande vers le javascript, mais comment fait on pour envoyé des données php vers du javascript?

Peu importe POST ou GET c'est pas important a ce niveau.

jette un Oeil sur ça essaye de comprendre comment ça marche.

C'est des select mais la façon de procéder est la même pour quoi que ce soit.

Bonsoir,

j'ai fait mon script php, ma fonction ajax qui récupère un résultat mais je sais pas comment exploiter ce résultat et l'insérer dans le code html avec javascript pouvez vous m'aider s'il vous plait?

le script php

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<?php include '../fonctions/db_connection.php'; if (isset($_POST['id'])){ $sql="SELECT * FROM comment WHERE id_news=".$_POST['id'].""; $res=mysql_query($sql) or die('Erreur');   if (mysql_num_rows($res) > 0){ while ($row=mysql_fetch_array($res)){ echo '<tr><td>'.$row['id_com'].'</td><td colspan="4">'.$row['comment'].'</td></tr>'; } }else echo '<tr><td colspan="5">Aucune Commentaire</td></tr>'; } ?>

---

La fonction javascript d'envoi et récupération de données:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function displaySubline (line) { //envoie des donées vers le script php   $(document).ready(function () { $.post("dashboard/test.php", { id: line }, function success(data){ //ici mon insertion html de data //alert(data); }); });   }

---

Auriez vous une idée pour insérer une ligne de tableau html (<tr>) juste après une ligne qui comporte une id dans un tableau qui a aussi une idée avec jQuery?
Merci bcp

j'ai rajouter :

Code:

---

$('#tablenut tr:last').after(data);

---

dans la fonction javascrit de la facont suivante:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function displaySubline (line) { //envoie des donées vers le php   $(document).ready(function () { $.post("dashboard/test.php", { id: line }, function success(data){ $('#tablenut tr:last').after(data); //alert(data); }); });   }

---

Ca m'insère bien ce que je veux mais, c'est en fin de table normal à cause du lest de jquery me direz vous, alors dans ce cas, comment faire en sorte pour l'insérer juste après la ligne <tr> qui a tel ou tel id ?

Trouvé ! suffisait de remplacer:

Code:

---

$('#tablenut tr:last).after(data);

---

par

Code:

---

$('#tablenut tr:#news_'+line).after(data);

---

Comme c'est super !! Merci à toi llaffont !!