Version imprimable
Bonjour,
Je préfère prévenir tout de suite, je suis 0 en AJAX !! :D
J'ai une page des plus simple avec un tableau contenant des données, et juste en dessous un formulaire qui permet de saisir des données qui viendront s'incrémenter dans ce tableau.
Ce que j'aimerais faire, c'est qu'à chaque validation d'ajout, mon tableau se mette à jour. Je présume que c'est vraiment tout simple à faire en ajax, mais bien sur, je n'ai rien trouvé de très concret ^^
Merci d'avance !
La meilleure idée qui me vienne serait de placer une div à la fin de ton tableau comme ceci:
puis d'ajouter tes éléments à l'aide des DOM --->Code:
2
3
4
5... </tr> <div id="maDiv"></div> </table>
les syntaxes DOM
si tu ne sais pas comment l'implémenter, envoie ton code, je pourrais peut-être t'aider ;)
Je suis parti là dessus : http://www.crea-paradise.com/sujet-1...t-un-bloc.html
la toute dernière réponse en bas de page.
Par contre, à la base mon url est du style:
Donc j'ai fait unCode:test.php?id=blabla&machin=blabla&truc=blabla
en espérant qu'après il me ramène mes id.Code:<span onclick="request('page.php?id=blabla&machin=blabla&truc=blabla', 'block-actualiser');">Clique ici pour actualiser</span>
Mais ça n'est pas pris en compte quand ça recharge mon tableau :x
EDIT : et pire, ça me renvoie en url les champs de mon formulaire :x
Tableau d'affichage des données :
Code:
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
Formulaire de saisie :
Quand je click sur le bouton "ok" du formulaire, j'aimerais que ça fasse l'insertion puis que ça mette à jour mon tableau d'affichage des donnéesCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
pour sûr, ça ne pouvait pas marcher... :?
dans le code sur lequel tu te bases, la fonction appelée par un clic sur ta balise "span" ne fait que créer ton objet ActiveX, et n'exécute pas le reste du code ^^
Une façon un peu plus propre de faire tes appels (selon moi) serait comme ceci:
D'abord tu déclare ton objet et tu te fais une fonction javascript de création d'objet ActiveX:
faire comme celà te sera très utile par la suite si tu as besoin de faire plusieurs appels de fonctions AJAX...Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ensuite j'ai du mal à saisir ce que tu essaye de faire...
Il me semble que tu commences par récupérer tes données à partir de ta variable $_GET["edit"] et maintenant tu veux ajouter des enregistrements au fur et à mesure?
Si c'est le cas je te conseille déjà de passer ton "edit" par post (ça décrassera déjà un peu les milliards de variables que tu passes en "GET" ^^), puis pour plus de lisibilité (déjà je suis pas sûr que ton code puisse marcher comme ça au niveau du tableau), récupère tous les GET dont tu as besoin dans des variables et fais un seul bloc de code php pour l'affichage de ton tableau, du genre:
Pour finir, si j'ai vu juste dans tes intentions, il faudra refaire une bonne partie du code... Seulement là je rame un peu au taf donc je n'aurais pas le temps de voir ça avant ce soir...Code:
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
Oui, mon paramétre "edit" représente un numéro d'action, et pour chaque action, je veux ajouter des moyens.
Mon premier tableau (celui que je veux mettre à jour avec de l'AJAX) récupère tous les moyens de l'action dans laquelle je me trouve (paramètre "edit"), et via le formulaire d'après je veux insérer d'autre moyens.
Sinon les tableaux marchent très bien là =) Avec le lien que je t'ai montré, si je met l'appel de la fonction sur l'image "ok", deux choses peuvent se passer :
- si je garde les balises form : lorsqu'il a tenté de mettre à jour mon tableau, il me passe en paramètres les valeurs des champs du formulaire, et non les id qui sont actuellement en GET ==> Résultat : mes requêtes basées sur mes GET ne marche plus, donc ça va pas puisque ça me fait 50 000 erreurs sur des index non existants.
- si j'enlève les balises form : si j'insère un moyen via easyphp, et que je click sur l'image "ok", pas de problème, il me garde mes bonnes valeurs en paramètre, et il me met bien à jour mon tableau.
Maintenant, il faut qu'en plus de ça, j'arrive à faire l'insertion via le formulaire, et donc il faut que je garde les balises form. Mais j'en reviens au problème ci-dessus, à savoir qu'en gardant les balises form, mes paramètres passés en GET ne sont pas gardés ;(
^^ pas de doutes c'est bien de l'AJAX qu'il te faut :roll:
Je vais essayer de te faire ça ce soir ;)
Ok merci c'est sympa si t'as 10 p'tites minutes :p
Bon apparemment, je suis pas loin, le seul problème étant que je n'arrive pas à faire passer l'id (paramètre edit) vers mon actualiser.php, du coup ma requête ne prend rien, et mon tableau renvoyé est vide.
Pour tester que ça vient bien de là, j'ai fait un echo tout au début de mon actualiser.php :
Donc ça semble bien venir de là. Comment je peux faire pour transférer ce foutu id xDCode:Notice: Undefined index: edit in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 4
Extrait de ma page normale :
actualiser.js :Code:
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
actualiser.php :Code:
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
EDIT : En mettant ça :Code:
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
Code:<span onclick="request('<?php echo $_GET['edit'];?>', 'tableau_actualiser');">
Code:function request(id,cadre) {
Je réussis à récupérer l'id. Par contre mon insertion ne marche pas, il me sort un :Code:XHR.open("POST",'actualiser.php?edit='+id, true);
Donc il ne trouve pas les paramètres de mon formulaire que j'ai rempli :sCode:
2
3
4
5
6
7
8
9
10
11
Forcément, tu n'envoyais pas les données à la fonction que tu appelais, ça ne pouvait pas marcher... :roll:
Déjà le mieux c'est de nommer ton formulaire, et ensuite comme tu l'as fait, tu englobait tout ton tableau dans un div, donc Ajax perd tout son intérêt, tu as autant recharger normalement la page... ^^'
Si tu tiens à exploiter Ajax et gagner en temps de rafraichissement, il faut que tu ne réactualise que les données que tu ajoutes, donc il faut mettre ta div tout à la fin de ton tableau (donc tu n'affiches que 6 chaines que tu connais déjà au lieu de refaire un parcours entier de ta base :P )
Je te propose de faire comme ça:
Pour ton javascript, prends ça et je te laisse le soin de regarder les commentaires et de remplir toi-même ce qu'il manque, tout est indiqué :P (ben oui jvais pas faire tout le boulot non plus... :roll: )
ensuite pour ta page de base, remplace par ça...Code:
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
Code:
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
Pour finir, dans ta page actualiser.php, il faudra que tu fasses une requête pour insérer tes données dans ta base, ensuite fais un simple "echo" de toutes tes variables (récupérées par un GET bien sûr ;) ) que tu sépares par un ";" (ex: echo "$date;$etat;$var3..."; )
fais attention de les afficher dans le même ordre que tu les récupères dans ton javascript ;)
je te laisse le soin de tester, ça devrait marcher :roll:
sinon, ou si tu as des questions, je reste à ta disposition 8-)
Ahah non, mon fichier fait un peu plus de 1000 lignes (j'ai 3 onglets et dans chaque onglet j'ai 3 autres onglet xDD), donc j'y gagne même à recharger mon tableau entier :ppCitation:
tu englobait tout ton tableau dans un div, donc Ajax perd tout son intérêt, tu as autant recharger normalement la page... ^^
Je test ça de suite, merci
Hum, aucune réaction quand je clique sur le bouton "ok", ce serait pas dû au fait que le bouton se trouve dans le formulaire et qu'il n'y a aucun action=" " dans ce form ??
EDIT : Nan en fait, même en dehors du form il n'y a aucun réaction :x
Met le "onClick" de ton span sur le bouton ^^'
edit:
Je suis aussi un peu débutant en Ajax, mais un script comme ça devrait marcher assez facilement...
Si ça ne fait toujours rien, ouvre la console d'erreur et dis-moi ce qu'il te renvoie ;)
le bouton ? xD J'en ai aucun ^^Citation:
Met le "onClick" de ton span sur le bouton ^^'
Je parlais de ce bouton-là :roll: (l'img si tu préfères... ;) )Citation:
Envoyé par Herman
ah wai, dsl xD
Euh j'ai déjà testé aussi, aucune réaction.
hum, j'ai un :
sur cette ligne :Code:formu has no properties
Code:var type_moyen = formu.type_moyen.value;
this correspond à ton span... mais this.form ne correspond à rien !Code:<span onclick="ajouter(this.form);">
D'abord parce que ton span ne contient pas de formulaire, mais surtout parce que document.forms récupère tous les formulaires et que pour accéder aux propriétés, il faut préciser duquel on parle...
formulaire étant soit le numéro d'ordre de ton form à l'intérieur de la page, soit le nom du formulaire recherché.Code:document.forms[formulaire]
1/ Si je met :
J'ai maintenant le droit à un :Code:<span onclick="ajouter(document.forms[formAjout]);">
surCode:formu has no properties
2/ Si je met :Code:var type_moyen = formu.type_moyen.value;
J'ai droit à un :Code:<span onclick="ajouter(document.forms['formAjout']);">
surCode:XmlHttp has no properties
Code:XmlHttp.onreadystatechange=stateChanged;
Haha oui sur ce coup je suis un gros blaireau :D
Dans ta fonction ajouter, tout au début j'ai oublié de mettre la ligne:
C'est bien beau de faire des fonctions pour que ce soit propre, encore faut-il les appeler...:lol:Code:
2
Pour le problème du span, je pense que ça marchera si tu dégage juste les balises span et /span après avoir mis ta fonction "onClick" sur ton bouton ;)
Bon allez on y est presque :
là dessus :Code:list is not defined
: ))))Code:list($type_moyen,$date,$etat,$intitule,$jour_homme,$cout) = XmlHttp.responseText.split(reg);
hmmm c'est vrai que list, c'est du php... ^^'
essaie
shito, qui ferait mieux de dormir un peu... :|Code:
2
3
4
5
il doit manquer quelque chose là :
c'est la dernière ligne du js, donc après, ça devrait fonctionner !!!Code:getElementById("divAjout").appendChild(tr);
EDIT : j'ai mis :
et ça lance bien la chose, mais ça s'affiche un peu bizarrement xD J'analyse le truc et je reviens après !! :pCode:document.getElementById("divAjout").appendChild(tr);
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 ?
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:
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 :
Donc bizarre qu'il m'affiche ça, et bizarre aussi qu'il me l'affiche au dessus :xCode:undefined undefined undefined undefined undefined
Et je tourne sur Firefox. Sur IE ça marche pas, mais bon je verrais ça après
:? 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 :
actualiser.js :Code:
2
3
4
5
6
evaluation.php :Code:
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
Code:
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
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'];
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.
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 ;)
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 :
Et mes lignes vont s'ajouter AVANT le tableau . . . super . . . joli bug :oCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
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):
Et ça marche nikel :)Code:
2
3
4
5
Merci shito pour l'aide : )))))
Juste par curiosité, pourquoi tu ajoutes un tr dans une div et pas dans le tableau prévu pour ????
Du genre
Et appeler ses variables tr, c'est pas le top...Code:document.getElementsByTagName("table")|0].appendChild(tr);
EDIT
Ah... grillé.
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 )
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: