[AJAX] Tableau avec plusieurs DIV

Version imprimable

25/09/2009, 15h01
gregtix

[AJAX] Tableau avec plusieurs DIV

Bonjour à tous,

C'est mon premier message sur le forum, je débute en ajax et je suis confronté à un petit problème ... n'hésitez pas à me reprendre avec la terminologie si je suis un peu ambigu.

Je vais tenter de vous exposer mon problème, j'utilise une liste déroulante qui me permet d'exécuter ma fonction Ajax, le résultat étant affiché dans un DIV ... jusque là ça fonctionne !

Ma fonction retourne un tableau composé d'un certain nombre d'enregistrements, et c'est là que j'ai besoin d'un peu d'aide ...

Je souhaiterais pour chacun de ces enregistrements exécuter une nouvelle fonction ajax mais je bloque avec l'utilisation de la méthode getElementById et de ma balise DIV.
J'ai tenté d'ajouter un identifiant à ma balise DIV (du style

Code:

<div id="tab_result_$id"></div>

mais je ne sais comment le récupérer dans mon getElementById) ... d'ailleurs je ne sais pas si la bonne méthode

Si vous avez une petite idée ce serait vraiment cool ;)
25/09/2009, 17h05
yann0807

Ce que je voudrais savoir c'est pourquoi tu affiches une variable php ($id) dans du code html? Normalement ce serait <?php echo $id;?>
De plus, tu voudrais executer une fonction pour chacun de tes enregistrements. Mais part quel moyen? Un bouton qui effectuerais des modifications?
25/09/2009, 20h38
gregtix

Tu as tout à fait raison, j'ai simplifié l'écriture dans mon message mais il s'agit bien de <?php echo $id;?>.

Citation:

De plus, tu voudrais executer une fonction pour chacun de tes enregistrements. Mais part quel moyen? Un bouton qui effectuerais des modifications?

S'il n'y pas d'autre solution ce pourrait être un bouton mais l'idée serait que lorsque le tableau se charge, la fonction serait appelée pour chaque enregistrement... mais c'est vrai que je ne vois pas trop comment appeler ma fonction du fait que j'utilise déjà un <div> pour afficher mon tableau ..
26/09/2009, 08h50
Bovino

Salut,
Actuellement, comme le souligne yann0807, ta demande est beaucoup trop vague pour que l'on puisse t'aider.
On ne peut pas deviner ton code et tu ne nous montres que le code d'une div vide...

Citation:

j'ai simplifié l'écriture dans mon message

oui, un peu trop même :)

Je ne voulais pas mettre tout mon code mais c'est vrai que ce sera probablement plus facile pour m'aider.

Ma fonction permettant d'afficher mon tableau dans un div (fonction appeler via une liste déroulante)

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
36
37
38
39
40
41
42
43
44
45
46
	function getXhr()
	{
		var xhr = null;
		if(window.XMLHttpRequest){ // Firefox et autres
		xhr = new XMLHttpRequest(); 	   
		}
		else if(window.ActiveXObject){ // Internet Explorer 
		   try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
		}
		else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
		} 
		return xhr;
	}
 
	function AFF_CLASSEMENT(id_compet,saison) 
	{ 
		var xhr = getXhr();
 
		xhr.onreadystatechange = function() 
		{ 
			if ( xhr.readyState == 4 )
			{
				if(xhr.status  != 200)
				{
					document.getElementById("tab_clt").innerHTML ="Error code " + xhr.status;
				} 
				else 
				{
					document.getElementById("tab_clt").innerHTML = xhr.responseText;
				}
			} 
			else 
			{
				document.getElementById("tab_clt").innerHTML = "Chargement en cours...<br /><br /><img src='loading.gif' alt=''/>";
			}
		 } 	
		var url= "aff_classement.php?id_compet="+escape(id_compet)+"&saison="+escape(saison);
		xhr.open("GET",url, true); 
		xhr.send(null);
	}

Le fichier aff_classement.php exécute une requète mysql et renvoie le tableau dont le code est ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
     <table width="60%" border="1" align="center" cellpadding="1" cellspacing="0">
        <tr>
          <td width="10%" align="center">Rang</td>
          <td align="left">Joueur</td>
          <td width="20%" nowrap>Evolution</td>
        </tr>
        <?php
$rang=1;
while($row = mysql_fetch_array($result))
{
        ?>
	<tr>
	  <td><b><?php echo $rang++; ?></b></td>
	  <td align="left" nowrap><?php echo $row['joueur']; ?></td>
	  <td align="center"></td>
	</tr>
	<?php 
} 
?>
</table>

Ma boucle while renvoie donc un certain nombre d'enregistrements et c'est donc au niveau du champ évolution que je souhaiterais exécuter une nouvelle fonction.

J'espère que cette fois c'est un peu plus clair ;)

27/09/2009, 09h46
Bovino

Citation:

J'espère que cette fois c'est un peu plus clair

Désolé, mais non, pas vraiment... je ne vois pas comment est appelée ta fonction AFF_CLASSEMENT() ni ce que tu souhaites faire après...
En revanche, je suppose que tu veux lier des fonctions JavaScript aux éléments ajoutés.
Si c'est le cas, voir la FAQ.

La fonction AFF_CLASSEMENT() est appelée via un formulaire
Code:

1 2 3 4 5 6 7 8 9 <form name="form_saison" method="get" action=""> <input type="hidden" name="id_compet" value="<?php echo $_GET['id_compet']; ?>"> <select name="saison" class="color_font" onChange="javascript:AFF_CLASSEMENT(<?php echo $_GET['id_compet']; ?>,this.value)"> <option value="" selected>Sélection</option> <option value="1" selected>Saison 1</option> <option value="2" selected>Saison 2</option> </select> </form>
Concernant la FAQ je pense que tu m'as mis sur une piste, mais j'ai du mal à l'implémenter.... Si j'ai bien compris il faudrait que j'appelle ma nouvelle fonction à ce niveau là ?
Code:

1 2 3 4 5 6 else { document.getElementById("tab_clt").innerHTML = xhr.responseText; nouvelle_fonction(); }

28/09/2009, 13h32
yann0807

Ben oui sauf qu'il faudrait un paramètre dans ta fonction (en l'occurrence un id ou quelque chose comme ça pour qu'il sache sur quel élément intervenir).
28/09/2009, 14h21
gregtix

C'est justement à ce niveau là que je blqoue car au moment de l'exécution de ma première fonction je ne connais pas encore l'id de mon enregistrement celui-ci étant généré dans mon fichier aff_classement.php

Pourquoi ne pas tenter( je dis bien tenter c'est de la bidouille pas sûr que ça marche) dans ton fichier php qui est appelé (aff...) faire ça:
(En imaginant que tu veuilles intervenir la)
Code:

1 2 3 4 5 6 7 8 9 10 while($row = mysql_fetch_array($result)) { ?> <tr> <td><b><?php echo $rang++; ?></b></td> <td align="left" nowrap><?php echo $row['joueur'] ; ?></td> <td align="center">echo '<script language="javascript">tafonction(<?php echo $row['idquilfaut'] ?>)</script>'</td> </tr> <?php }

Disons que ajouter une fonction de cette façon je sais faire, mais de cette façon ma fonction étant souvent assez "lourde" mon tableau met beaucoup de temps à s'afficher.
L'idée serait donc d'utiliser comme pour ma première fonction, une fonction ajax et une balise DIV
Code:

1 2 3 4 5 6 7 8 9 10 11 while($row = mysql_fetch_array($result)) { ?> <tr> <td><b><?php echo $rang++; ?></b></td> <td align="left" nowrap><?php echo $row['joueur'] ; ?></td> <td align="center"><div id="resultat_fonction"></div></td> </tr> <?php }

28/09/2009, 20h41
yann0807

Et cette fonction serait chargée de quelle manière?
La première c'est sur un onChange la ce serait?
29/09/2009, 11h35
gregtix

C'est bien là mon souci :cry:

Personne n'a une petite idée ?
29/09/2009, 14h48
yann0807
Et ben la ma foi ta seule solution serait dans ton fichier php d'afficher l'id, de decouper tes resultats dans ton retour ajax et de faire
Code:

1 2 3 4 5 //Decoupe ton resultat avec la fonction split document.getElementById("tab_clt").innerHTML = tab[0]; nouvelle_fonction(tab[1]);
Je dis ça comme ça à la volée
05/10/2009, 09h09
gregtix

Bon je ne m'en sors pas, je vais donc laisser tomber ...

Merci quand même pour votre aide :ccool: