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

Version imprimable

Voir 40 message(s) de cette discussion en une page

01/07/2008, 09h38
Herman

Bon allez on y est presque :

Code:

list is not defined

là dessus :

Code:

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

: ))))
01/07/2008, 09h42
shito
hmmm c'est vrai que list, c'est du php... ^^'

essaie
Code:

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... :|
01/07/2008, 09h45
Herman

il doit manquer quelque chose là :

Code:

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

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

EDIT : j'ai mis :

Code:

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
01/07/2008, 10h04
Herman

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 ?
01/07/2008, 10h34
shito

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... :traine:
01/07/2008, 10h35
Herman

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:

undefined undefined undefined undefined undefined

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

Et je tourne sur Firefox. Sur IE ça marche pas, mais bon je verrais ça après
01/07/2008, 10h46
shito

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

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:

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:

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:

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>

01/07/2008, 11h04
shito

ah oui c'est normal... :roll:

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:

echo $_GET['type_moyen'].';'.$_GET['date'].';'.$_GET['etat'].';'.$_GET['intitule'].';'.$_GET['jour_homme'].';'.$_GET['cout'];
01/07/2008, 11h09
Herman

1 pièce(s) jointe(s)

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.
01/07/2008, 11h16
shito

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 ;)
01/07/2008, 11h19
Herman

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

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

Code:

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

01/07/2008, 13h54
Herman
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:

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 : )))))
01/07/2008, 13h55
Bovino

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

Code:

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

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

EDIT
Ah... grillé.
01/07/2008, 13h57
shito

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 )
01/07/2008, 14h05
Herman

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

Voir 40 message(s) de cette discussion en une page