Discussion :

[vichenze]

Ce code me permet de mettre à jour un tableau à partir des résultats d'une requete en AJAX. Je créé une nouvelle ligne, une nouvelle cellule, et je place dedans du texte ainsi qu'un champ input hidden.

Sous Firefox ça marche très bien, sous IE aucune ligne ne se rajoute à mon tableau

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
// On créé la ligne
var TR = document.createElement ("tr");
 
var TD_kcal = document.createElement ("td");
var TXT_kcal = document.createTextNode (kcal);
TD_kcal.appendChild (TXT_kcal);
 
var form = document.createElement("form");
TD_kcal.appendChild (form);
 
// input hidden kcal
var input_kcal = document.createElement("input");
form.appendChild (input_kcal);
// attribut type
var attr_type = document.createAttribute("type");
attr_type.nodeValue = "hidden";
input_kcal.setAttributeNode(attr_type);
// attribut name
var attr_name = document.createAttribute("name");
attr_name.nodeValue = "kcal";
input_kcal.setAttributeNode(attr_name);
// attribut value
var attr_val = document.createAttribute("value");
attr_val.nodeValue = kcal;
input_kcal.setAttributeNode(attr_val);
 
 
TR.appendChild(TD_kcal);

si je remplace "hidden" par "text" ça marche bien en affichant l'input, mais c'est pas ce que je veux...

Je vois vraiment pas d'où ça pourrait venir, vous avez une idée ?

Merci

[Matthieu2000]

as tu créé un tbody dans ta table?

[Auteur]

bonjour,


pour un tableau il faut utiliser les méthodes insertRow() et insertCell().

[vichenze]

Oui j'ai bien un thead et un tbody, et je rajoute dans le tbody


Je vais essayer avec InsertRow et InsertCell merci.

[vichenze]

Bon alors j'ai fait des tests avec insertRow() et InsertCell() avec des cellules de text, ça marche bien sous IE et sous FF, par contre quand je veux mettre des formulaires dans mes cellules ça marche moins bien :/


Le code simplifié :

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
var row = document.getElementById("liste").insertRow(-1);
 
var TD_kcal = row.insertCell(-1);
var TXT_kcal = document.createTextNode (kcal);
TD_kcal.appendChild (TXT_kcal);
 
// formulaire
var form = document.createElement("form");
TD_kcal.appendChild (form);
 
// input hidden 
var input_kcal = document.createElement("input");
input_kcal.className = 'kcal';				
form.appendChild (input_kcal);
	// attribut name
	var attr_name = document.createAttribute("name");
	attr_name.nodeValue = "kcal";
	input_kcal.setAttributeNode(attr_name);
	// attribut value
	var attr_val = document.createAttribute("value");
	attr_val.nodeValue = kcal;
	input_kcal.setAttributeNode(attr_val);
	// attribut type
	var attr_type = document.createAttribute("type");
	attr_type.nodeValue = "hidden";
	input_kcal.setAttributeNode(attr_type);

J'ai également d'autre insertCell() avant et après mais qui ne pose pas de problème puisque ce n'est que du texte.

Le problème ici est que l'input que je veux mettre dans mon form doit être "hidden", je créé donc un attribut type et je suis lui donne la bonne valeur. Ca marche sans problème sous FF, mais pas sous IE.
Sous IE j'ai l'input qui s'affiche comme si j'avais donné à l'attribut type la valeur "text". Et puis les cellules qui devrait s'afficher après celle ci ne s'affiche pas non plus, comme s'il bloquait sur cette cellule, et pourtant je n'ai pas de message d'erreur apparent.


Je vois vraiment pas d'où ça peux venir, une idée ?

[Auteur]

IE ne prend pas en charge les méthodes createAttribute, setAttributeNode, setAttribute, getAttribute (bref toutes les méthodes qui gèrent les attributs ).

Donc il vaut mieux écrire :

Code javascript :

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

1
2
3
4
5
 
var input_kcal = document.createElement("input");
input_kcal.type = "hidden";
input_kcal.value = "valeur";
//etc..

[vichenze]

Merci pour la réponse, je viens d'essayer le code suivant :

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
var TD_kcal = row.insertCell(-1);
var TXT_kcal = document.createTextNode (kcal);
TD_kcal.appendChild (TXT_kcal);
// form				
var form = document.createElement("form");
TD_kcal.appendChild (form);
 
// input hidden kcal
var input_kcal = document.createElement("input");
input_kcal.className = 'kcal';				
form.appendChild (input_kcal);
input_kcal.name = "kcal";
input_kcal.value = 10; 
input_kcal.type = "hidden";
alert(input_kcal.value);

j'ai toujours le même problème sous IE, et j'ai même l'impression que ça ne passe plus sous FF. J'ai rajouté le alert() pour voir si le value est bien attribué.
Avec type="text" j'ai bien 10 qui s'affiche, avec type="hidden" j'ai une fenêtre vide

Je vais revenir avec ma première solution, mais j'aimerais bien quand même trouver pourquoi ça ne marche pas sous IE

[Auteur]

Fais l'appendChild après avoir défini les propriétés de ton élément. De plus, sous IE je crois que l'on ne peut pas attribuer de manière dynamique le name d'un élément.

[E.Bzz]

Fais l'appendChild après avoir défini les propriétés de ton élément. De plus, sous IE je crois que l'on ne peut pas attribuer de manière dynamique le name d'un élément.

+1
Il faut le faire après que l'élément ait été créé ...

A+

[vichenze]

Ca marche

Plus de problème a priori, même sous IE.


Une dernière question, dans une autre cellule j'ai un input qui doit avoir un attribut onchange.

J'avais ça avec ma première solution :

Code :

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

1
2
3
4
// attribut onchange
var attr_change = document.createAttribute("onchange");
attr_change.nodeValue = "MAJ_info_rec()";
iput_poids.setAttributeNode(attr_change);

mais avec la nouvelle manière que vous m'avez expliquer j'ai pas l'impression que ce soit possible de faire

Code :

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

input_poids.onchange = "MAJ_info_rec()";

C'est possible de rajouter un gestionnaire d'évènement onchange sur un input générer dynamiquement ?

Merci

[Auteur]

mais avec la nouvelle manière que vous m'avez expliquer j'ai pas l'impression que ce soit possible de faire

Code :

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

input_poids.onchange = "MAJ_info_rec()";

C'est possible de rajouter un gestionnaire d'évènement onchange sur un input générer dynamiquement ?

tu y étais presque :

Code :

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

input_poids.onchange = function(){MAJ_info_rec()};

[vichenze]

Génial ça marche

Merci beaucoup pour cette précieuse aide.