Discussion :

[bastian06n]

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 :

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

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

[bastian06n]

Pour commencer j'ai fais ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

[llaffont]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[bastian06n]

Quand tu dis:

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?

[llaffont]

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.

[bastian06n]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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