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

**highman** · 20/04/2007, 15h04

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 !

**Djakisback** · 20/04/2007, 15h10

Salut,

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 ?

**highman** · 20/04/2007, 15h14

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 :

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

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 :

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

1
2
 
document.getElementById('id_du_tableau').innerHTML = xhr.responseText;

Mais ceci ne marche pas ...

**Djakisback** · 20/04/2007, 15h20

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.

**highman** · 20/04/2007, 15h27

ok j'essaye ca tout de suite ! merci beacoup

**highman** · 20/04/2007, 15h31

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

**Djakisback** · 20/04/2007, 15h40

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

**highman** · 20/04/2007, 15h46

Voici mon code :

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

Code :

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

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 :

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

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

**highman** · 20/04/2007, 16h23

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 !

**NEOAKIRA** · 20/04/2007, 16h30

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

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

JavaScript

Discussions similaires

Partager

Partager