[AJAX] creation d'un tableau d'affichage des données

Version imprimable

20/04/2007, 15h04
highman

[AJAX] creation d'un tableau d'affichage des données

Bonjour,

Je reprend actuellement un portail web que j'essaye de développer en ajax. Je suis assez débutant dans ce domaine (ainsi qu'en javascript).
Pour tout ce qui est insertion et modification aucun probleme, mais je dois a présent récupere une table de produits et l'afficher (avec un truc sur la désignation).

J'ai essayé en créant un tableau HTML et en essayant d'en modifier le contenu avec innerHTML (qui ne semble pas marcher).

J'ai lu qu'on pouvait utiliser addRow sur un tableau pr ajouter une ligne, le probleme etant que je récupere toutes les données d'un coup...

Si quelqu'un a une petite idée, je lui en serais très reconnaissant !!

Merci d'avance !:oops:
20/04/2007, 15h10
Djakisback

Salut,

Citation:

mais je dois a présent récupere une table de produits et l'afficher

tu veux dire quoi par là ? tu reçois tes données sous quelle forme ?
20/04/2007, 15h14
highman
mon script ajax appelle en fait un script PHP qui lui renvoi (sous forme de xhr.responseText) des lignes de tableau comme celle ci :
Code:

1 2 3 4 <tr><td>C005125</td><td>Amplificateur c12 diam. 5</td></tr> <tr><td>C005126</td><td>Amplificateur c12 diam. 4</td></tr> <tr><td>C005127</td><td>Amplificateur c12 diam. 5</td></tr>
J'essaye ensuite d'integrer ces lignes dans le tableau en faisant
Code:

1 2 document.getElementById('id_du_tableau').innerHTML = xhr.responseText;
Mais ceci ne marche pas ... :(
20/04/2007, 15h20
Djakisback

Quittes à faire tu peux pas envoyer directement le tableau en entier ? car je crois que le innerHTML du table et en read-only sous IE.
Ensuite tu mets juste ton tableau dans un span ou un div.
20/04/2007, 15h27
highman

ok j'essaye ca tout de suite ! merci beacoup
20/04/2007, 15h31
highman

Ca ne marche pas non plus ... peut être est-ce car mon script ajax est déclaré avant la div ? c'est vraiment bizarre je dois dire !

Pourtant quand je fais un alert(xhr.responseText) j'ai bien le code d'un tableau html rempli qui m'est renvoyé..
20/04/2007, 15h40
Djakisback

Normalement il n'y a aucun problème, fais-voir ton code.

Voici mon code :

d'abord un fichier m_consultation_stock.php qui est inclus (avec include en php) dans index.php :

Code:

1
2
3
4
5
6
 
	<div id="liste_stock" style="position:absolute; top:200px; left:200px; width:400px; background-color:#DDDDDD">
			<input type="textbox" id="txt11">
			<input type="textbox" id="txt12"><input type="button" value="Go" onclick="renvoiListeProduits()">
	</div>
	<div id="affiche" name="affiche"></div>

puis dans index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
<head>
 
<script language="Javascript" src="Scripts/ajax_stock.js"> </script>
 
</head>
<body>
 
<?php
        require('Conf/portail_db.conf.php');
        require('Conf/portail_os.conf.php');
        require_once('Classes/u_sql.class.php');
        echo "page d'index ";
        $_sql = new u_sql();
        include('Modules/esp_salarie/stock/m_consultation_stock.php');
        
?>
</body>
</html>

et enfin le script ajax dans ajax_stock.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
	function renvoiListeProduits(){
		var xhr = getXhr()
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				remplirtab(xhr.responseText);
			}
		}
		xhr.open("GET","../Modules/esp_salarie/stock/get_liste_stock.php",true);
		xhr.send(null);
	}
 
var e = document.getElementById("affiche");
 
	function remplirtab(text){
		alert(text);
		e.innerHTML = text;
	}

20/04/2007, 16h23
highman

J'ai trouvé la solution, il fallait déclarer e = document.getElementById("affiche") dans la fonction remplirtab...

Merci beaucoup d'avoir répondu aussi vite !
20/04/2007, 16h30
NEOAKIRA

Fait renvoyer a ton script php tout le tableau et pas seulement les lignes, ajoute les balise <table> et </table>

Moi j'ai fait comme ça, mon script php me renvoie tout le tableau avec entête et toutes les lignes qui le compose et je l'affiche avec document.getElementById('informations').innerHTML = xhr.responseText; et ça marche...

Utilise le plugin Firebug destiner à Firefox pour débuger ton site, il te montrera tout les requêtes XHR avec leurs réponses ou leurs erreurs, Très très utile ce plugin quand on fait de l'ajax...