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

[laurentSc]

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 :

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]

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]

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]

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

[laurentSc]

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 :

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 :

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]

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 :

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 :

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]

Je viens de rajouter la ligne

Code javascript :

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

mais ça ne marche pas...

[RomainVALERI]

Envoyé par laurentSc

Je viens de rajouter la ligne

Code javascript :

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]

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

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 :

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]

Envoyé par laurentSc

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

>>> Voilà. ^^

[nadox]

Ç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]

Ç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 :

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]

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]

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]

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]

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]

toujours pas :

Code javascript :

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]

Code javascript :

document.appendchild(corps);

Mieux :

Code javascript :

document.body.appendChild(corps);

[laurentSc]

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 :

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 */