Récupérer champ initial d'un select pour init

**laurentSc** · 05/04/2011, 22h26

Bonsoir,

je voudrais récupérer le champ sélectionné initial d'un select pour effectuer une init.
Pour clarifier mon besoin, voilà ce que j'ai fait (mais qui ne marche pas)(comme je suis dans un script js, tout le html est encapsulé par des document.write) :

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
 
function action1(sel_id)
{
var ref = sel_id.value;
...
}
document.write('<table><tr><td>');
document.write('<div id="idparent">');
document.write('<form>');
document.write('<select id="selectId" onChange="action1(this)">');
tab=h_AttachmentNames.replace(/"/g,'').split(',')
for (i=0;i<tab.length;i++)
{
    sel=(i==0)?'selected':'';
    str=tab[i].substring(0,tab[i].indexOf(".flv"));
    document.write('<option value='+str+' '+sel+'>'+str+'</option>');
}
document.write('</select></form></div>');
document.write('<td width=50></td><td>');
document.write('<div id="idfille">'</div>');
document.write('</td></tr></table>');
 
action1('selectId');

Le problème, c'est qu'au lieu de prendre la valeur initiale du select, dans la variable ref de la fonction action1, au départ, on a undefined. Comment puis-je récupérer la valeur initiale du select ?

**nadox** · 06/04/2011, 00h01

Bonsoir,
Dans ton appel à la fonction action1(dernière ligne) tu passe comme paramètre une chaine de caractère. Dans l'appel de cette même fonction sur l'évènement onchange du select, tu passe 'this', qui est une référence à l'élément du DOM qui représente le select.
Il faut utiliser :
https://developer.mozilla.org/fr/DOM...getElementById
(qui est la fonction la plus utilisée pour manipuler le DOM)

**RomainVALERI** · 06/04/2011, 00h07

Envoyé par laurentSc

... comme je suis dans un script js, tout le html est encapsulé par des document.write ...

Heu...

C'est moi qui comprend mal, ou bien il est sous-entendu que tu es obligé d'utiliser cette aberration ?

??

Je me demande si c'est vraiment bon pour ma santé mentale de te demander pourquoi tu traines des document.write au 21ème siècle...

Tu es allergique au DOM ? ^^ (y'en a.

)

**nadox** · 06/04/2011, 00h11

C'est sans aucun doute de l'allergie... peut être au DOM, mais je crois que c'est surtout aux docs !

**laurentSc** · 06/04/2011, 01h16

C'est sans aucun doute de l'allergie... peut être au DOM, mais je crois que c'est surtout aux docs !

j'essaie de me soigner et comme doc, vu que j'aime beaucoup les exemples, j'essaie de m'inspirer de ton code Nadox, et la plupart des document.write sont désormais commentés, mais les 2 div ont disparus (plus de select ni de flowplayer).
Qu'est-ce qui ne va pas dans ce code :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
var idparent = document.createElement("div");
idparent.setAttribute("id","idparent");
var idfille = document.createElement("div");
idfille.setAttribute("id","idfille");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var form = document.createElement("form");
var videoSelect = document.createElement("select");
videoSelect.setAttribute("id","selectId");
form.appendChild(videoSelect);
videoSelect.onchange = function() {
action1(videoSelect);
}
idparent.appendChild(form);
td1.appendChild(idparent);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.style.width=50;
td3.appendChild(idfille);
tbody.appendChild(tr);
table.appendChild(tbody);
//idparent.appendChild(table);
 
//document.write('<table><tr><td>');
//document.write('<div id="idparent">');
//document.write('<form>');
//document.write('<select id="selectId" onChange="action1(this)">');
tab=h_AttachmentNames.replace(/"/g,'').split(',')
for (i=0;i<tab.length;i++)
{
sel=(i==0)?'selected':'';
    str=tab[i].substring(0,tab[i].indexOf(".flv"));
	document.write('<option value='+str+' '+sel+'>'+str+'</option>');
}
//document.write('</select>');
 
//alert('selectId.value='+selectId.value);
//document.write('</form>');
//document.write('</div>');
//document.write('<td width=50></td><td>');
//document.write('<div id="idfille">');
//document.write('</div>');
//document.write('</td></tr></table>');
 
element = document.getElementById('selectId'); 
//alert('element='+element);
action1(element);

et voici la fonction qui lance flowplayer (et qui marche, puisqu'avec les document.write, elle marchait) :

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
function action1(sel_id) {
 
var ref = sel_id.value;
alert('ref='+ref);
 
	var sFileName_Raw = docUrl() + "/%24FILE/" + ref+'.flv' // + "?OpenElement";
	var re = new RegExp(" ","gi");
	var sFileName = sFileName_Raw.replace(re,"%20");
 
var div_id = document.getElementById("idfille");
 
	if (ref!=""){
	var aFlowPlayer = document.createElement("a"); // le lien qui contiendra le lecteur flash.
 
		aFlowPlayer.setAttribute("id","player");
 
		aFlowPlayer.style.float="left";
 
		aFlowPlayer.style.marginTop = "25px";
 
		aFlowPlayer.style.display = "block"
 
		aFlowPlayer.style.width = "320px";
 
		aFlowPlayer.style.height = "264px";
		div_id.appendChild(aFlowPlayer);
		document.getElementById("player").href = sFileName;
		flowplayer("player", "http://qkrintra.schneider-electric.com/LotusQuickr/videotest/Main.nsf/h_Index/00F4B34971CE6AF78525785000584E51/$File/flowplayer.swf");
 
	}
}

et d'ailleurs, l'appel ligne 53 au-dessus à action1 ne marche pas...

**nadox** · 06/04/2011, 01h52

ton élément 'table' n'est jamais rajouté dans le DOM.
Tu créé bien tout tes éléments, mais il faut aussi les injecter(appendChild) dans le DOM à la fin. Pour cela, tu peux utiliser

Code javascript :

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

document.getElementById("conteneur").appendChild(table);

si tu dispose d'un conteneur "vide"( "div-corps" par exemple) pour l'accueillir, ou sinon il faut ruser avec la fonction insertBefore, pour ne pas que tes éléments se retrouvent à la fin.

Code :

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

1
2
3
 
var cible = document.getElementById("conteneur"); // il y a une div avec pour id "div-contenu", qui à l'air pas mal pour faire ça je crois.
cible.insertBefore(table,cible.firstChild);

**laurentSc** · 06/04/2011, 08h04

Je viens de rajouter la ligne

Code javascript :

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

document.getElementById("div-corps").appendChild(table);

mais ça ne marche pas...

**RomainVALERI** · 06/04/2011, 09h27

Envoyé par laurentSc

Je viens de rajouter la ligne

Code javascript :

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

document.getElementById("div-corps").appendChild(table);

mais ça ne marche pas...

Syntax error near line 1, expecting useful description, but found "Ca ne marche pas" (

)

Et que dit le DOM Inspector ?

Comment ??? Pas installé cet outil ?

**nadox** · 06/04/2011, 09h34

... Il faut que la div existe dans le DOM pour faire ça...
Mais pourquoi ne pas passer this.value dans le onchange, et ensuite appeler action1 avec tab[0] ?

**laurentSc** · 06/04/2011, 10h00

Et que dit le DOM Inspector ?

Et c'est quoi cette bête-là ?

... Il faut que la div existe dans le DOM pour faire ça...

Pour en tenir compte et pour que la div existe avant l'insertion de la table, j'ai fait :

Code javascript :

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

1
2
3
4
5
var corps = document.createElement("div");
corps.setAttribute("id","corps");
var cible = document.getElementById("corps"); 
cible.insertBefore(corps,cible.firstChild);
document.getElementById("corps").appendChild(table);

mais toujours rien...

**RomainVALERI** · 06/04/2011, 10h06

Envoyé par laurentSc

Et c'est quoi cette bête-là ?

>>> Voilà. ^^

**nadox** · 06/04/2011, 10h18

Ça revient au même, puisque document.createElement ne positionne pas le nouvel élément dans la page...
Je crois me souvenir que tu es sur ie, donc tu as les outils de développement pour remplacer le DOM inspector.

**laurentSc** · 06/04/2011, 10h35

Ça revient au même, puisque document.createElement ne positionne pas le nouvel élément dans la page...

Ca, d'accord, mais avec ça (les 2 dernière lignes) ?

Code javascript :

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

1
2
3
4
5
 
var corps = document.createElement("div");
corps.setAttribute("id","corps");
var cible = document.getElementById("corps"); 
cible.insertBefore(corps,cible.firstChild);

et sinon, les outils de développement pour IE, c'est trop compliqué...

**nadox** · 06/04/2011, 12h00

Ben les deux premières lignes font la création de la div sans l'ajouter dans le document. Les deux autres lignes essayent de récupérer la div qui n'est toujours pas dans le document...

**laurentSc** · 06/04/2011, 12h25

D'accord, mais dans ce cas, comment l'insérer dans le DOM vu qu'elle n'aura probablement pas de conteneur (donc appendchild impossible) ?

**RomainVALERI** · 06/04/2011, 12h34

Envoyé par laurentSc

D'accord, mais dans ce cas, comment l'insérer dans le DOM vu qu'elle n'aura probablement pas de conteneur (donc appendchild impossible) ?

pas de conteneur ?

et <body> ?

**nadox** · 06/04/2011, 13h09

De mémoire, tu avais une div avec l'id "div-contenu qui permettrais de l'insérer en dessous du bandeau. (avec insertBefore)

**laurentSc** · 06/04/2011, 14h16

toujours pas :

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
30
31
32
33
34
var idparent = document.createElement("div");
var corps = document.createElement("div");
idparent.setAttribute("id","idparent");
corps.setAttribute("id","corps");
var idfille = document.createElement("div");
idfille.setAttribute("id","idfille");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var form = document.createElement("form");
var videoSelect = document.createElement("select");
videoSelect.setAttribute("id","selectId");
form.appendChild(videoSelect);
videoSelect.onchange = function() {
action1(videoSelect.value);
}
idparent.appendChild(form);
td1.appendChild(idparent);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.style.width=50;
td3.appendChild(idfille);
tbody.appendChild(tr);
table.appendChild(tbody);
corps.appendChild(table);
document.appendchild(corps);
 
var conteneur = document.getElementById("id-contenu");	if (conteneur.firstChild){ 		conteneur.insertBefore(corps, conteneur.firstChild);
	} else { // sinon on l'injecte dedans...
		conteneur.appendChild(corps); 	}

**RomainVALERI** · 06/04/2011, 16h21

Code javascript :

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

document.appendchild(corps);

Mieux :

Code javascript :

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

document.body.appendChild(corps);

**laurentSc** · 06/04/2011, 20h28

Merci pour la correction de ce bug de débutant, mais il y en a d'autres. Si j'ai pû tout faire marcher avec mon code pourri plein de document.write, ici, je n'ai ni select (côté div parent) ni flowplayer (côté div fille).
Le code complet de création du DOM :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var idparent = document.createElement("div");
var corps = document.createElement("div");
idparent.setAttribute("id","idparent");
corps.setAttribute("id","corps");
var idfille = document.createElement("div");
idfille.setAttribute("id","idfille");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var form = document.createElement("form");
var videoSelect = document.createElement("select");
videoSelect.setAttribute("id","selectId");
form.appendChild(videoSelect);
videoSelect.onchange = function() {
action1(videoSelect.value);
}
idparent.appendChild(form);
td1.appendChild(idparent);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.style.width=50;
td3.appendChild(idfille);
tbody.appendChild(tr);
table.appendChild(tbody);
corps.appendChild(table);
document.body.appendChild(corps); 
 
 
tab=h_AttachmentNames.replace(/"/g,'').split(',')
for (i=0;i<tab.length;i++)
{
str=tab[i].substring(0,tab[i].indexOf(".flv"));
alert('str='+str);           //ça, c'est bon...
var newOption = document.createElement("option");
newOption.value = str;
var newOptionTxt = document.createTextNode(str);
newOption.appendChild(newOptionTxt);
videoSelect.appendChild(newOption);
}
 
action1(tab[0].substring(0,tab[0].indexOf(".flv"))); /* au démarrage on appelle la fonction qui appelle flowplayer */

Récupérer champ initial d'un select pour init

JavaScript

Discussions similaires

Partager

Partager