Mise à jour dynamique d'une listebox

**SPACHFR** · 04/05/2009, 13h10

Bonjour,

J'essaie de mettre à jour la liste de choix 'TST' dynamiquement en fonction du choix réalisé dans la liste 'EventType' via une fonction Evententry
Malgrè de nombreux essais je ne parviens toujours à au résultat.

Fonction appelante :

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
 
function f_createContent() {
			var e_div = f_getElement('containers');
			S_CALNUM = S_CALNUM + 1;
			e_div.innerHTML += N_CALNUM
                                + '<select id="EventType'+ N_CALNUM +'" size="1" style="text-align:left;" class="Event" onChange="Evententry(this.value)">'
				+ '<option value="0" selected title="Select a event type to be added in simulation">Event Type'
				+ '<option value="1" title="choix1">choix 1'
				+ '<option value="2" title="choix2">choix 2'
				+ '</select>'
				+ '<input type="text" id="date' + N_CALNUM + '" value="" size="9" class="Event"/>'
				+ '<img title="Open Calendar" class="tcalIcon" onclick="A_TCALS[\'myCalID' + N_CALNUM + '\'].f_toggle()" id="tcalico_myCalID' + N_CALNUM + '" src="imgs/cal.gif"/>'
				+ '<input type="text" id="datef' + S_CALNUM + '" value="" size="9" class="Event"/>'
				+ '<img title="Open Calendar" class="tcalIcon" onclick="A_TCALS[\'myCalID' + S_CALNUM + '\'].f_toggle()" id="tcalico_myCalID' + S_CALNUM + '" src="imgs/cal.gif"/>'
				+ '<select id="TST' + N_CALNUM + '" size="1" class="Event">'
				+ '<option value="NONE" selected title="CPC Name">CPC Name'
				+ '</select>'
                                new tcal ({
				// form name
				'formname': 'Eventform',
				// input name
				'controlname': 'date' + N_CALNUM,
				// set unique ID to identify the elements
				'id': 'myCalID' + N_CALNUM
			});
			new tcal ({
				// form name
				'formname': 'Eventform',
				// input name
				'controlname': 'datef' + S_CALNUM,
				// set unique ID to identify the elements
				'id': 'myCalID' + S_CALNUM
			});
			N_CALNUM++;
			S_CALNUM++;
		}

Fonction appelée (Evententry)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function Evententry(SelectedEvent) {
 switch (SelectedEvent) {
	case "1":
                   var message =Lcpc
				+ '<select id="TST" size="1" class="Event">'
				+ '<option value="'chx1'">chx1'
				+ '<option value="'chx2'">chx2'
				+ '</select>';
      break
	default:
  }
document.getElementById("TST").innerHTML=Lcpc;
}

Pourriez vous m'indiquer comment mettre à jour la liste 'TST'.
Je débute en javascript, mon erreur est certainement grosse mais ça fait des heures que je cherche sans trouver de solution

Merci

**emmanuel.remy** · 04/05/2009, 13h34

Salut,

Tu écris:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function Evententry(SelectedEvent) {
 switch (SelectedEvent) {
	case "1":
                   var message =Lcpc
				+ '<select id="TST" size="1" class="Event">'
				+ '<option value="'chx1'">chx1'
				+ '<option value="'chx2'">chx2'
				+ '</select>';
      break
	default:
  }
document.getElementById("TST").innerHTML=Lcpc;
}

or , hormis le fait que je ne sais pas ce qu'est Lcpc, je pense que le code que tu voulais écrire est plutôt celui-ci:

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
 
function Evententry(SelectedEvent) {
 var message ="";
 switch (SelectedEvent) {
	case "1":
                   message =Lcpc
				+ '<select id="TST" size="1" class="Event">'
				+ '<option value="'chx1'">chx1'
				+ '<option value="'chx2'">chx2'
				+ '</select>';
      break
	default:
  }
document.getElementById("TST").innerHTML= message;
}

ERE

**SPACHFR** · 04/05/2009, 14h29

MERCI pour cette réponse (à force de chercher j'ai les yeux qui piquent....)
en fait Lcpc est l'entête du select

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
 
function Evententry(SelectedEvent) {
 var message ="";
 var Lcpc ="<select id="TST" size="1" class="Event">";
 switch (SelectedEvent) {
	case "1":
                   message =Lcpc
				+ '<option value="'chx1'">chx1'
				+ '<option value="'chx2'">chx2'
				+ '</select>';
      break
	default:
  }
document.getElementById("TST").innerHTML= message;
}

Sinon j'ai toujours une erreur

Code :

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

1
2
 
document.getElementById(...) a la valeur NULL ou n'est pas un Objet

Je continue à chercher, si quelqu'un à une idée elle est la bien venue

**andry.aime** · 04/05/2009, 14h46

1-Pour créer un objet dynamiquement, n'utilise pas innerHTML, veuillez voir la faq.
http://javascript.developpez.com/faq...DOM#DOMajouter
2-Les balises des options ne sont pas fermées
3-TST n'est pas encore créé quand tu l'appelles.

**SPACHFR** · 04/05/2009, 15h06

Merci pour les remarques.

le point 1 je regarde mais je ne connais rien au DOM. J'avais également trouvé un exemple dans les FAQ, malheureusement pas commenté.
http://javascript.developpez.com/faq...js#listesLiees

Le point 2 c'est corrigé (j'ai honte..)

Le point 3 il faut plutot lire
document.getElementById("TST"+N_CALNUM).innerHTML=Lcpc;
Mais cela ne change rien....

Encore quelques heures est je suis bon pour une camisole.

**SPACHFR** · 04/05/2009, 15h41

J'ai un peu avancé, sans pour autant obtenir le résultat recherché.
Cependant lors de l'appel de Evententry, j'ai ajouté le paramètre this.form en plus du this.value afin de récupérer la totalité des id du formulaires.
appel:

Code :

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

1
2
 
onChange="Evententry(this.form,this.value)

fonction:

Code :

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

1
2
 
function Evententry(form, SelectedEvent) {

J'ai fais quelques tests sur des input de type text, et lorsque l'ID n'est pas construit dynamiquement j'arrive à lire la valeur sans problème.(ex. id='Nom1')

Mais lorsque celui-ci est dynamique (id='Nom'+valeur) valeur étant un numérique entier, j'ai toujours le même message d'erreur... idem que pour les listbox. j'en conclu que le problème viens de là, mais je ne vois vraiment pas quoi faire.....

**emmanuel.remy** · 04/05/2009, 16h14

Re-Salut,

Je viens de prendre ton code et de le tester: de mon côté je récupère bien les valeurs pour les ID construits dynamiquement et suite à un innerHTML.

Ce avec IE6 et Firefox.

Peux tu passer le code qui te permet d'interroger les valeurs car tu dois avoir un souci dans cette partie.

ERE

**SPACHFR** · 04/05/2009, 16h47

Merci de tes réponses,

voici la fonction appelante, qui crée les id dynamiquement. les entrées.
La fonction Evententry est simplifiée ( à vrai dire il n'y a plus rien dedans...)mais même comme ça , cela ne fonctionne pas (sous IE7 & FF)
Je suis curieux de voir comment tu as fait..., je pète un plomb

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
 
		function f_createContent() {
			var e_div = f_getElement('containers');
			S_CALNUM = S_CALNUM + 1;
			e_div.innerHTML += N_CALNUM
				+ '<select id="EventType'+ N_CALNUM +'" size="1" style="text-align:left;" class="Event" onChange="Evententry(this.form,this.value)">'
				+ '<option value="0" selected title="Select a event">Event Type</option>'
				+ '<option value="1" title="Increase">Increase</option>'
				+ '<option value="2" title="Decrease">Decrease</option>'
				+ '<option value="3" title="Modify value">Modify DC</option>'
				+ '<option value="4" title="Modify  weight value">Modifyweight</option>'
				+ '<option value="5" title="Change">change</option>'
				+ '<option value="6" title="group">group</option>'
				+ '<option value="7" title="Move">Move</option>'
				+ '<option value="8"title="Activation">Activate</option>'
				+ '<option value="9" title="shutdown" >Deactivate</option>'
				+ '<option value="10" title="Change">change</option>'
				+ '</select>'
				+ '<select name="CPC' + N_CALNUM + '"id="CPC' + N_CALNUM + '" size="1" class="Event">'
				+ '<option value="NONE" selected title="CPC Name">CPC Name</option>'
				+ '</select>'
				+ '<select id="LP' + N_CALNUM + '" size="1" class="Event">'
				+ '<option value="NONE" selected title="LP Name">LPAR Name</option>'
				+ '</select>'
				+ '<INPUT TYPE="text" id="EventValue" SIZE="4" MAXLENGTH="4" class="Event" value="toto">'
				+ '<INPUT TYPE="text" id="UserCom' + N_CALNUM + '" SIZE="25" MAXLENGTH="25" class="Event" value="titi">';
			N_CALNUM++;
			S_CALNUM++;
		}

fonction appelée

Code :

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

1
2
3
4
5
 
function Evententry(form, SelectedEvent) {  //Event selectionne
  var zone='CPC'+N_CALNUM;
  document.getElementById(zone).innerHTML='coucou';
}

**emmanuel.remy** · 04/05/2009, 17h17

Je crois que je viens de cibler ton erreur !

Code :

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

1
2
3
4
5
6
7
8
9
 
function f_createContent() {
...
//ici ton innerHTML avec '<select id="EventType'+ N_CALNUM +'" ...
//puis:
N_CALNUM++;
S_CALNUM++;
...
}

donc quand tu appelles

Code :

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

1
2
  var zone='CPC'+N_CALNUM;
  document.getElementById(zone).innerHTML='coucou';

, N_CALNUM est trop grand de... 1.

Une solution est de déplacer ton N_CALNUM AVANT de faire le innerHTML.

ERE

**SPACHFR** · 04/05/2009, 18h01

Je viens de tester rapide en mettant -1 à N_CALCUM (pour voir) lors de la réception dans la fonction Evententry.
Je crois que tu es dans le vrai

.
Le innerHTML n'est pas la bonne solution, mais du coup la listbox à été modifiée (il n'y a plus rien dedans)

Je creuse ta solution car ce doit être la bonne et je met ça propre.

Encore mille fois merci de ton aide.
Je mettrai résolu dès que c'est tout bon

**emmanuel.remy** · 04/05/2009, 18h07

Le innerHTML n'est pas la bonne solution, mais du coup la listbox à été modifiée.

... et cela fonctionne donc le innerHTML n'est pas une si mauvaise solution

même s'il ne s'apparente pas aux règles de l'art...

ERE

**SPACHFR** · 04/05/2009, 18h10

Le innerHTML n'est pas la solution car du coup mais listebox est vide mais elle à bien été modifiée.
Je pense qu'il doit y avoir des instructions pour les listbox, je vais chercher...

**emmanuel.remy** · 04/05/2009, 18h26

Envoyé par SPACHFR

Le innerHTML n'est pas la solution car du coup mais listebox est vide mais elle à bien été modifiée.
Je pense qu'il doit y avoir des instructions pour les listbox, je vais chercher...

J'ai oublié de te poser la question suivante: que souhaites tu faire quand tu écris ce code ?

Code :

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

1
2
3
4
function Evententry(form, SelectedEvent) {  //Event selectionne
  var zone='CPC'+N_CALNUM;
  document.getElementById(zone).innerHTML='coucou';
}

ERE

**andry.aime** · 05/05/2009, 08h28

Essaye d'utiliser DOM pour ajouter des elements

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
function f_createContent()
{
	var e_div = f_getElement('containers');
	S_CALNUM++;
	e_div.innerHTML += N_CALNUM;
	var monSelect=document.createElement('select');
	monSelect.id='EventType'+N_CALNUM;
	var a=new Option('Event Type','0');
	a.setAttribute('title','Select a event');
	monSelect.options[monSelect.length]=a;
	var b=new Option('Increase','1');
	b.setAttribute('title','Increase');
	monSelect.options[monSelect.length]=b;
	//Ainsi de suite
	e_div.appendChild(monSelect);
}

**SPACHFR** · 05/05/2009, 09h35

L'objectif est de mettre à jour les entrées d' une listbox en fonction du choix d'une autre listebox.
Jusqu'ici j'arrive à savoir quelle option est sélectionnée, maintenant grace à ton aide j'arrive à cibler la listbox devant être mis à jour, reste à réaliser cette mise à jour.
J'ai trouvé des exemples, reste à comprendre comment ils fonctionnent.
J'ai un peu de mal à saisir comment l'affichage de la listbox est mis à jour

Pour le DOM, cela me semble très intéressant,

**emmanuel.remy** · 05/05/2009, 10h06

Envoyé par SPACHFR

L'objectif est de mettre à jour les entrées d' une listbox en fonction du choix d'une autre listebox.
Jusqu'ici j'arrive à savoir quelle option est sélectionnée, maintenant grace à ton aide j'arrive à cibler la listbox devant être mis à jour, reste à réaliser cette mise à jour.
J'ai trouvé des exemples, reste à comprendre comment ils fonctionnent.
J'ai un peu de mal à saisir comment l'affichage de la listbox est mis à jour

Pour le DOM, cela me semble très intéressant,

Effectivement dans ce cas précis, c'est plus logique de passer par le DOM où tu trouves cette notion d'ajouter de nouvelles "OPTION" à ta liste. Tu peux reprendre le code de andry.aime et l'appliquer sur ton onchange

ERE

**SPACHFR** · 05/05/2009, 10h46

Pour le DOM c'est vrai que cela semble bien, mais il faudrait que je revoie tout mon code....et en plus j'ai jamais fais de DOM.
J'aimerai bien y arriver sans DOM pour le moment. L'exemple de Andy est bien, mais c'est dans ma fonction Evententry que j'effectue la mise à jour.
Bref pour le moment je tourne toujours en rond

**andry.aime** · 05/05/2009, 11h10

Modifie le nom de paramètre form.

Code :

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

monSelect.onchange=function(){Evententry(idForm, SelectedEvent)}

**SPACHFR** · 05/05/2009, 18h15

Merci à vous deux pour m'avoir guidé dans la résolution de mon problème.
Vos remarques mon permis d'arriver à l'objectif souhaité.

Mes Events fonctionnent, j'ai viré le compteur (N_CALNUM) de ma fonction et j'ai passé l'ID comme suggéré.

PS: Le prochain Dev, je me met au DOM....

Mise à jour dynamique d'une listebox

JavaScript

Discussions similaires

Partager

Partager