[AJAX] Recharger les données d'un tableau

**Herman** · 01/07/2008, 09h38

Bon allez on y est presque :

Code :

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

list is not defined

là dessus :

Code :

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

list($type_moyen,$date,$etat,$intitule,$jour_homme,$cout) = XmlHttp.responseText.split(reg);

: ))))

**shito** · 01/07/2008, 09h42

hmmm c'est vrai que list, c'est du php... ^^'

essaie

Code :

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

1
2
3
4
5
 
var resultat = XmlHttp.responseText.split(reg);
var date = resultat[0];
var etat = resultat[1];
etc...

shito, qui ferait mieux de dormir un peu...

**Herman** · 01/07/2008, 09h45

il doit manquer quelque chose là :

Code :

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

getElementById("divAjout").appendChild(tr);

c'est la dernière ligne du js, donc après, ça devrait fonctionner !!!

EDIT : j'ai mis :

Code :

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

document.getElementById("divAjout").appendChild(tr);

et ça lance bien la chose, mais ça s'affiche un peu bizarrement xD J'analyse le truc et je reviens après !! :p

**Herman** · 01/07/2008, 10h04

Bon ça marcheeeeeeeeeeeeeee . . . sauf qu'au lieu de m'afficher mon tableau, il m'interprète pas le HTML et il m'affiche les lignes HTML telle quelle xD

Dans mon actualiser.php, que ce soit avec un echo, ou sans, ça me fait pareil xD

EDIT : c'est sur qu'il fallait bien mettre "document." et pas autre chose dans mon post précédent ?

**shito** · 01/07/2008, 10h34

nonon c'était bien ça

(saleté que j'oublie partout >.<)

Sinon tu tournes sur quel navigateur?
Il me semble que ce code n'avait été testé que sur IE... Pour le reste, ça dépasse mes compétences...

**Herman** · 01/07/2008, 10h35

ah mais wai mais c'est normal. Dans mon actualiser.php je refaisais une table. Je l'ai suppr, et ça m'affiche maintenant ça au dessus de mon tableau initial :

Code :

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

undefined	undefined	undefined	undefined	undefined

Donc bizarre qu'il m'affiche ça, et bizarre aussi qu'il me l'affiche au dessus

Et je tourne sur Firefox. Sur IE ça marche pas, mais bon je verrais ça après

**shito** · 01/07/2008, 10h46

hum...
Pourrais-tu renvoyer tout ton code tel qu'il est maintenant?

**Herman** · 01/07/2008, 10h48

Par contre mes ajouts se font bien. C'est à dire que ça m'ajoute cette ligne d'undefined au dessus de mon tableau, mais si je F5, mon tableau se met tout comme il faut avec les bonnes valeurs.

actualiser.php :

Code :

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

1
2
3
4
5
6
<?php
require('connec.php');
mysql_query("INSERT INTO moyen VALUES('', '" . $_GET['edit']. "', '". $_GET['type_moyen'] ."', '". $_GET['date'] ."', '". $_GET['etat'] ."', '". $_GET['intitule'] ."', '". $_GET['jour_homme'] ."', '". $_GET['cout'] ."')");
echo $_GET['edit'];
echo $_GET['type_moyen'];
?>

actualiser.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
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var XmlHttp;
function getXmlHttpObject()
{
	var xmlhttpreq=null;
	if(window.XMLHttpRequest)
	{
		xmlhttpreq = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		xmlhttpreq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else
	{
		alert("Objets HTTP non supportés par le navigateur!");
	}
	return xmlhttpreq;
}
 
function ajouter(formu)
{
	XmlHttp = getXmlHttpObject();
 
	var edit = formu.edit.value;
	var type_moyen = formu.type_moyen.value;
	var date = formu.date.value;
	var etat = formu.etat_avancement.value;
	var intitule = formu.intitule.value;
	var jour_homme = formu.jour_homme.value;
	var cout = formu.cout.value;
	//etc...
	XmlHttp.onreadystatechange=stateChanged;
	XmlHttp.open("GET","actualiser.php?edit="+edit+"&type_moyen="+type_moyen+"&date="+date+"&etat="+etat+"&intitule="+intitule+"&jour_homme="+jour_homme+"&cout="+cout);	//reprend toutes tes variables ici pour les envoyer à ta page de traitement
	XmlHttp.send(null);
}
 
function stateChanged()
{
	if(XmlHttp.readyState==4)
	{
		var reg = new RegExp("[;]+", "g");
 
		var resultat = XmlHttp.responseText.split(reg);
 
		var type_moyen = resultat[0];
		var date = resultat[1];
		var etat = resultat[2];
		var intitule = resultat[3];
		var jour_homme = resultat[4];
		var cout = resultat[5];
 
		var tr = document.createElement('tr');	
		var td1 = document.createElement('td');
		var td2 = document.createElement('td');
		var td3 = document.createElement('td');
		var td4 = document.createElement('td');
		var td5 = document.createElement('td');
		var td6 = document.createElement('td');
		td1.appendChild(document.createTextNode(type_moyen));
		td2.appendChild(document.createTextNode(date));
		td3.appendChild(document.createTextNode(etat));
		td4.appendChild(document.createTextNode(intitule));
		td5.appendChild(document.createTextNode(jour_homme));
		td6.appendChild(document.createTextNode(cout));
 
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		tr.appendChild(td6);
 
		document.getElementById("divAjout").appendChild(tr);
	}
}

evaluation.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
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
47
48
49
50
51
52
53
<table>
	<tr>	
		<TD class="titrelogin" width="15%">Catégorie</TD>
		<TD class="titrelogin" width="15%">Date réalisation</TD>
		<TD class="titrelogin" width="15%" align="center">Etat avancement</TD>
		<TD class="titrelogin" width="40%" align="center">Intitul&eacute;</TD>
		<TD class="titrelogin" width="10%" align="center">Jour/Homme</TD>
		<TD class="titrelogin" width="10%" align="center">Coûts</TD>
		<TD width="5%"></td>
	</tr>
	<?php if (isset($_GET['edit'])){
        $reponse = mysql_query('SELECT * FROM moyen WHERE id_action = "'. $_GET['edit'] . '" ');
        
        while ($donnees = mysql_fetch_array($reponse) )
        {
        $date = explode('-',$donnees['date_realisation']);
        echo '<tr class="donneetableauut" onmouseover="this.style.background=\'#dcdcdc\'"  onmouseout="this.style.background=\'#FFFFFF\'" >
                <td class="" id ="'.$donnees['id_moyen'] .'" align="center">'.$donnees['moyen'].'</td>
                <td class="" id ="' .$donnees['id_moyen'] .'" align="center">'.$date[2].'/'.$date[1].'/'.$date[0].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'. $donnees['etat_avancement'].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'. $donnees['intitule_moyen'].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['jour_homme'].'</td>
                <td id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['cout'].'</td>
        </tr>';
        }
        }?>
<div id="divAjout">
</div>
</table>
<br />	
 
<form name="formAjout">	
<table>
	<tr>
	<td width="1%"><INPUT type=hidden name="edit" value="<?php echo $_GET['edit'];?>"></td>
		<td width="15%">
			<SELECT name="type_moyen">
				<option value="" selected="selected">- - -</option>
				<option value="Technique">Technique</option>
				<option value="Humain">Humain</option>
				<option value="Organisationnel">Organisationnel</option>
				<option value="Environnemental">Environnemental</option>
			</SELECT>
		</td>
		<td width="15%"><INPUT type=text name="date"></td>
		<td width="15%"><INPUT type=text name="etat_avancement"></td>
		<td width="30%" align="center"><INPUT size="40" type=text name="intitule"></td>
		<td width="10%" align="center"><INPUT type=text name="jour_homme"></td>
		<td width="10%" align="center"><INPUT type=text name="cout"></td>
		<td width="5%" ><span onclick="ajouter(document.forms['formAjout']);"><img src="images/button_ok.png" width="14" /></span></td>
	</tr>	
</table>
</form>

**shito** · 01/07/2008, 11h04

ah oui c'est normal...

Dans ton "actualiser.php" tu fais bien ta requête donc ça marche...
Par contre tu n'as pas fait un echo de toutes tes variables comme je l'avais dit

(bon après y aura peut-être un autre bug, mais comme ça c'est sûr ça peut pas marcher

)

à la place de tes deux echo en fin de fichier, fais plutôt ça:

Code :

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

echo $_GET['type_moyen'].';'.$_GET['date'].';'.$_GET['etat'].';'.$_GET['intitule'].';'.$_GET['jour_homme'].';'.$_GET['cout'];

**Herman** · 01/07/2008, 11h09

ah mais wai j'suis débile, j'avais oublié de les rajouter. Ça m'affiche ce qu'il y a en pièce jointe maintenant, à savoir ça m'affiche au dessus du tableau actuel, sans mise en page.

Et apparemment les 2 undefined correspondent à jour_homme et à cout, donc les deux numériques.

**shito** · 01/07/2008, 11h16

juste au cas où, tu as rechargé ta page depuis les dernières modifs? ^^'
Sinon regarde à nouveau si IE ne dit rien de mieux, et là je crois que mon super niveau de super débutant Ajax ne peut rien de plus pour toi...

J'espère au moins que j'ai été clair et que j'ai pu t'aider pour les bases d'Ajax

**Herman** · 01/07/2008, 11h19

Oui j'ai déjà recharger ^^

Sous IE toujours rien, erreur javascript apparemment xD

Merci encore pour tout, je vais essayer de trifouiller pour voir si je trouve quelques chose !

Si y'a des gens qui voit l'erreur, help !

))

**Herman** · 01/07/2008, 13h35

J'ai fait ça pour faire encore plus simple :

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>
	<tr>	
		<TD class="titrelogin" width="15%">Catégorie</TD>
		<TD class="titrelogin" width="15%">Date réalisation</TD>
		<TD class="titrelogin" width="15%" align="center">Etat avancement</TD>
		<TD class="titrelogin" width="40%" align="center">Intitul&eacute;</TD>
		<TD class="titrelogin" width="10%" align="center">Jour/Homme</TD>
		<TD class="titrelogin" width="10%" align="center">Coûts</TD>
		<TD width="5%"></TD>
	</tr>
	<div id="divAjout">
	</div>
</table>

Et mes lignes vont s'ajouter AVANT le tableau . . . super . . . joli bug :o

**Herman** · 01/07/2008, 13h54

Allez hop, problème résolu

le problème avec les div, c'est que apparemment quand on les fout entre un </tr> et un </table>, ils deviennent un peu dingues.

Donc j'ai sorti mon div du tableau, et pour chaque nouvelle insertion, je crée un nouveau tableau (j'ai ajouté ça en plus dans mon AJAX):

Code :

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

1
2
3
4
5
var table = document.createElement('table');
[...]
table.appendChild(tr);
[...]
document.getElementById("divAjout").appendChild(table);

Et ça marche nikel

Merci shito pour l'aide : )))))

**Bovino** · 01/07/2008, 13h55

Juste par curiosité, pourquoi tu ajoutes un tr dans une div et pas dans le tableau prévu pour ????
Du genre

Code :

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

document.getElementsByTagName("table")|0].appendChild(tr);

Et appeler ses variables tr, c'est pas le top...

EDIT
Ah... grillé.

**shito** · 01/07/2008, 13h57

Hmmm pas génial pour l'affichage je suppose, mais tant que ça marche... ^^
Mais je viens de penser à un truc con... Si tu mets id="divAjout" à ton tableau et que tu dégages le div, ça donne quoi?

edit: grillé moi aussi ^^' mais je pense que ta solution a plus de chances de marcher... (c'est à dire que c'est sûr qu'elle marche... XDDD )

**Herman** · 01/07/2008, 14h05

AHAHAHAH ça marche trop bien xDDD

Avec ma solution, comme il insère un nouveau tableau à chaque fois, je suis obligé d'ajouter x lignes dans mon actualiser.js pour qu'il le mette en forme comme il faut (de la bonne largeur de page, avec la bonne class, le bon width etc etc).

Avec ta solution, comme j'ai déjà le canevas de mon tableau (mes balises table, et ma première ligne tr avec des td de bonne largeur, etc), bah dès que j'ajoute une ligne, il me la met parfaitement comme il faut :p

Merci

[AJAX] Recharger les données d'un tableau

JavaScript

Discussions similaires

Partager

Partager