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

Version imprimable

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 ?

06/04/2011, 00h01
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)
06/04/2011, 00h07
RomainVALERI

Citation:

Envoyé par laurentSc

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

Heu... :koi: 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... :calim2:

Tu es allergique au DOM ? ^^ (y'en a. :aie:)
06/04/2011, 00h11
nadox

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

Citation:

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

:mouarf:
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...

06/04/2011, 01h52
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:

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);
06/04/2011, 08h04
laurentSc

Je viens de rajouter la ligne

Code:

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

mais ça ne marche pas...
06/04/2011, 09h27
RomainVALERI

Citation:

Envoyé par laurentSc

Je viens de rajouter la ligne

Code:

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" (:mouarf:)

Et que dit le DOM Inspector ? :?
Comment ??? Pas installé cet outil ? 8O
06/04/2011, 09h34
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] ?

Citation:

Et que dit le DOM Inspector ?

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

Citation:

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

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

06/04/2011, 10h06
RomainVALERI

Citation:

Envoyé par laurentSc

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

>>> Voilà. ^^
06/04/2011, 10h18
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.
06/04/2011, 10h35
laurentSc
Citation:

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

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é...
06/04/2011, 12h00
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...
06/04/2011, 12h25
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) ?
06/04/2011, 12h34
RomainVALERI

Citation:

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 ? :koi: et <body> ?
06/04/2011, 13h09
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)

toujours pas :

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

06/04/2011, 16h21
RomainVALERI

Code:

document.appendchild(corps);

:nono:

Mieux :

Code:

document.body.appendChild(corps);

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:

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

06/04/2011, 20h58
nadox
Code:

1 2 td2.style.width="50px";

J'ai intégré ta modif, et comme ça ne marchait toujours pas, j'ai fait le petit essai suivant qui ne marche pas non plus :

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
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="50px";
td3.appendChild(idfille);
tbody.appendChild(tr);
table.appendChild(tbody);
corps.appendChild(table);
document.body.appendChild(corps); 
t2.innerHTML="coucou";

Ce qui tendrait à prouver qu'il y a encore un problème dans le création du DOM... (si mon essai a du sens)

La création des éléments du DOM à l'air correcte.
(je suppose que ton essai était avec td2 plutôt que t2)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
</head>
<body>
    <script type="text/javascript">
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="50px";
td3.appendChild(idfille);
tbody.appendChild(tr);
table.appendChild(tbody);
corps.appendChild(table);
document.body.appendChild(corps); 
td2.innerHTML="coucou";
    </script>
</body>
</html>

Cette page de test me rend bien un select avec coucou a côté... (sous firefox)
Je ne vois pas d'erreur flagrante dans ce code. Peut-être ailleurs ?

07/04/2011, 13h34
laurentSc
Je suis sacrément fier de moi :D. Tout est bon maintenant.
- Le select et flowpayer étaient déjà présents, mais mal placés, et je devais scroller pour les voir, d'où j'ai crû qu'ils n'étaient pas là. Du coup, j'ai regardé à nouveau le source de l'intranet et trouvé un td (avec un id) où je pouvais mettre le code. Et donc :
  Code:
  
  1 2 var idcorps=document.getElementById("newsbody"); idcorps.appendChild(corps);
- Je ne sais pour quelle raison, un espace était souvent rajouté en début du nom du fichier et l'affichage échouait donc. Il fallait donc le retirer dans ce cas :
  
  Code:
  
  if (ref.charAt(0)==" ") ref=ref.substring(1,ref.length);
  
  (et n'enlever que celui en début de chaîne, au cas où il y en aurait dans le nom)
Enfin, merci pour ton code :ccool:, car il m'a servi de doc ;). J'ai pû m'en inspirer, pour faire un code qui marche, et sinon, ça aurait été impossible.