Discussion :

[arcade_stg_master]

Salut, j'ai un petit problème :

Je fais un bouton :

Code :

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

1
2
3
4
5
 
var bouton_modifier = document.createElement('input');
bouton_modifier.type = "button";
bouton_modifier.id = "bouton_modifier";
bouton_modifier.name = "bouton_modifier";

Je voudrais mettre ce bouton dans une cellule de tableau généré dynamiquement, donc je fais ça :
mon tableau dynamique qui récupère des valeurs dans une base via un fichier php qui génère du xml

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
 
for (var i=0; i<item.length; i++)
{
	... // lignes pas importantes où figure la création du bouton modifier
	tableau += "<tr bgcolor='#e0e0e0'>"
	tableau += "<td>"+user_id+"</td>";
	tableau += "<td>"+login+"</td>";
	tableau += "<td>"+mail+"</td>";
	tableau += "<td>"+date_creation+"</td>";
	tableau += "<td>"+nom+"</td>";
	tableau += "<td>"+prenom+"</td>";
	tableau += "<td>"+adresse+"</td>";
	tableau += "<td>"+code_postal+"</td>";
	tableau += "<td>"+ville+"</td>";
	tableau += "<td>"+telephone+"</td>";
	tableau += "<td>"+mobile+"</td>";
	tableau += "<td>"+entreprise+"</td>";
	tableau += "<td>"+multi_instance+"</td>";
	tableau += "<td>"+etat+"</td>";
	tableau += "<td>"+bouton_modifier+"</td>";//ligne importante
	tableau += "</tr>"
}

Le soucis c'est que tout s'affiche correctement à part le bouton, à la place du bouton j'ai un joli message [object HTMLInputElement]. Comment faire pour afficher le bouton à la place du message.

Merci d'avance

[andry.aime]

Bonjour,

Ne mélange pas la création d'un élément avec DOM et innerHTML.
innerHTML attend de string mais avec DOM, tu dois faire un appendChild dans l'objet parent.

A+.

[arcade_stg_master]

En fait, il faudrait que je fasse du html pur ce que j'ai essayé de faire au départ mais je ne peux pas utiliser this pour pouvoir personnaliser/individualiser mes boutons dynamiques. J'avais fait une structure de tableau tout en DOM mais je trouve ça casse bec et vachement fastidieux pour au final pas grand chose.

Aurais-tu une solution pour pouvoir récupérer la valeur de l'id d'un bouton généré dynamiquement :

si je remplace :

Code :

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

tableau += "<td>"+bouton_modifier+"</td>";

par :

Code :

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

tableau += "<td><input id=user_id type='button' onclick='modifier_utilisateur();' value='M'></td>";

[arcade_stg_master]

Alors, je suis encore sur ce problème, et j'ai eu une idée mais malheureusement, c'est pas encore ça. Pour utiliser des boutons dom avec lesquels je pourrais utiliser this pour les idividualiser je vais mettre une div dans la cellule en question avec un id et utiliser appendChild pour placer mes boutons :

Code :

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

1
2
3
4
5
 
tableau += "<td><div id='bt_ms'></div></td>";
var place_bt_utilisateur = document.getElementById('bt_ms');
place_bt_utilisateur.appendChild(bouton_modifier_utilisateur);
tableau += "</tr>";

et ça me fait le fabuleux message : Cannot call method 'appendChild' of null
WHY ?

Merci d'avance.

[andry.aime]

Parce que l'élément n'existe pas encore dans le DOM mais seulement en format de String de la variable tableau. Soit tu ajoutes d'abord ton tableau en faisant le innerHTML et c'est après que tu faits l'appendChild, soit tu utilises un innerHTML pour tous, soit tu utilises DOM pour tous.

Dans ton précédent post, si tu veux récupérer l'id du bouton pour utiliser dans la fonction

Code :

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

tableau += "<td><input id='user_id' type='button' onclick='modifier_utilisateur(this.id);' value='M'></td>";

Mais attention, un id doit être unique dans un document.

A+.

[arcade_stg_master]

Je n'ai pas réussi à manipuler le this.id dans la fonction quand je fais une alert(pour tester)

Code :

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

1
2
3
4
5
function modifier_utilisateur()
{
      toto = this.id;
      alert(toto);
}

on me répond : undefined

[andry.aime]

Regarde bien la valeur du paramètre dans le code que j'ai filé.

A+.

[arcade_stg_master]

La valeur du paramètre est this.id et donc ...

[andry.aime]

Code :

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

onclick='modifier_utilisateur(this.id);'

Code :

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

1
2
3
4
function modifier_utilisateur(id)
{
      alert(id);
}

[arcade_stg_master]

Merci nickel, je dois clairement révisé mon Javascript.

[sekaijin]

tu peux utiliser http://www.developpez.net/forums/d83...ace-innerhtml/

Code javascript :

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
var table = document.Table();
for (var i=0; i<item.length; i++)
{
    ... // lignes pas importantes où figure la création du bouton modifier
    table.Tr({bgcolor: '#e0e0e0'})
        .Td()
          .Button({
            id: 'bouton_modifier',
            onclick: function() {
              alert('click sur le bouton');
            }
          })                             .parentNode
                                         .parentNode
	.InlineTag ('td', user_id)       .parentNode
	.InlineTag ('td', login)         .parentNode
	.InlineTag ('td', mail)          .parentNode
	.InlineTag ('td', date_creation) .parentNode
	.InlineTag ('td', nom)           .parentNode
	.InlineTag ('td', prenom)        .parentNode
	.InlineTag ('td', adresse)       .parentNode
	.InlineTag ('td', code_postal)   .parentNode
	.InlineTag ('td', ville)         .parentNode
	.InlineTag ('td', telephone)     .parentNode
	.InlineTag ('td', mobile)        .parentNode
	.InlineTag ('td', entreprise)    .parentNode
	.InlineTag ('td', multi_instance).parentNode
	.InlineTag ('td', etat)          .parentNode
	.InlineTag ('td', bouton_modifier)
}

A+JYT