Mise à jour dynamique d'une listebox

Version imprimable

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:

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:

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

Salut,

Tu écris:

Code:

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:

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

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

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:

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

04/05/2009, 14h46
andry.aime

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.
04/05/2009, 15h06
SPACHFR

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.
04/05/2009, 15h41
SPACHFR
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:

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

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.....
04/05/2009, 16h14
emmanuel.remy

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

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:

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:

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

Je crois que je viens de cibler ton erreur !
Code:

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:

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

04/05/2009, 18h01
SPACHFR

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 :D.
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
04/05/2009, 18h07
emmanuel.remy

Citation:

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
04/05/2009, 18h10
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...
04/05/2009, 18h26
emmanuel.remy
Citation:

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:

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

Essaye d'utiliser DOM pour ajouter des elements

Code:

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);
}

05/05/2009, 09h35
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,
05/05/2009, 10h06
emmanuel.remy

Citation:

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
05/05/2009, 10h46
SPACHFR

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
:arf:
05/05/2009, 11h10
andry.aime

Modifie le nom de paramètre form.

Code:

monSelect.onchange=function(){Evententry(idForm, SelectedEvent)}
05/05/2009, 18h15
SPACHFR

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é.

:merci:

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