[Syntaxe]rafraichir une liste avec internet explorer

**achos** · 23/02/2007, 17h13

Bonjour tout le monde,
j'ai 2 pages HTML suivante :
index.html :

Code :

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

1
2
3
4
5
6
7
8
9
 
<form name="monform">
<select name="choix" id="choix">
<option value="rabat">rabat</option>
<option value="paris">paris</option>
<option value="berlin">berlin</option>
</select>
<input type="button" value="new" onClick="window.open('popup.html','ajouter_ville','width=200,height=200')">
</form>

ajout.html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script language="javascript">
function refreshPage(newValue){
  var w = window.opener.document.getElementById('choix');
  var content = w.innerHTML;
   content += '<option value="' + newValue + '">' + newValue + '</option>';
   w.innerHTML = content;
}
</script>
<form name="form">
ville <input type="text" name="ville" onBlur="refreshPage(this.value)">
<input type="button" value="ok" onClick="self.close();">
</form>

mon problème est que sous internet explorer la liste n'est pas affichée, elle est toute vide.
j'ai tester le même script sous Mozilla Firefox et Opera et il fonctionne bien.
pourquoi ça ne marche pas avec IE ? est ce qu'il y'a un autre moyen pour le faire fonctionner correctemet avec IE.

Merci d'avance

**Auteur** · 23/02/2007, 18h13

bonjour,

on ne créé pas une option avec innerHTML.
cf. http://sergep.developpez.com/tutorie...ge=page_5#LV-B
Puis regarde le paragraphe V-B-2-b où est expliqué comment est créé un select et ses options et le paragraphe V-B-2-c où est expliqué l'insertion d'une option dans la liste.

Code :

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

1
2
3
4
5
6
 
var elOption = new Option("Option", "valeur", false, false);
var elSelect= document.getElemenById("idSelect");
 
//Ajout dans le select de l'option
elSelect.options.add(elOption);

**achos** · 23/02/2007, 19h09

Merci bien pour la réponse et pour l'article.
je vais essayé de modifier mon script et on verra ce que ça donne.

**Auteur** · 24/02/2007, 11h33

Envoyé par achos

Merci bien pour la réponse et pour l'article.
je vais essayé de modifier mon script et on verra ce que ça donne.

tiens moi au courant

**achos** · 26/02/2007, 11h51

j'ai essayé avec ce script mais ca ne donne rien.
j'ai pas bien compris comment ça fonctionne, je veux juste savoir quel est le problème de mon script cité auparavent avec le navigateur internet explorer.

**Auteur** · 26/02/2007, 20h47

Je me suis appuyé sur ces exemples pour ton script
http://www.developpez.net/forums/sho...d.php?t=271424

Dans un premier temps, j'accèdais à ta liste (getElementById()) dans une fonction de la pop-up et je la mettais à jour. L'ennui est que cela faisait planter IE. J'ai donc procédé autrement :

Dans la pop-up j'appelle la fonction ajouterVille() où je récupère la valeur de l'input.

Puis j'appelle la fonction ajouter() contenue dans index.html et à qui je transmets le nom de la ville et dans laquelle je mets à jour la liste. Du coup, j'accède à la liste des ville non plus à partir de la pop-up mais à partir de la fenêtre "opener".

J'ai donc refait ton code :
index.html

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var chargeOk = "false";
 
function ouvreFille()
{
 if (chargeOk=="false")  //pour vérifier que la pop-up a été ouverte
     window.open('popup.htm','ajouter_ville','width=400,height=200,status=yes');
}
 
function ajouter(ville)
{
  var liste = document.getElementById("choix");
  var elOption = new Option(ville, ville, false, false);
 
  //Ajout dans le select de l'option
  liste.options.add(elOption);
  alert(ville+" a été ajoutée à la liste");
 
}
//-->
</script>
 
</head>
 
<body>
<form id="monform">
 
  <select id="choix">
  <option value="rabat">rabat</option>
  <option value="paris">paris</option>
  <option value="berlin">berlin</option>
  </select>
 
  <input type="button" value="new" onclick="ouvreFille()">
 
</form>
 
</body>
 
</html>

popup.html

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function charge()
{
 //on confime a la fenetre mere que la pop-up est ouverte
 window.opener.chargeOk = "true";
}
function decharge()
{
 //on confime a la fenetre mere que la pop-up est fermee
 window.opener.chargeOk = "false";
}
 
function ajouterVille()
{
  var ville = document.getElementById("idText").value;
  //on transmet a la fonction ajouter() de la fenetre mere le nom de la ville
  window.opener.ajouter(ville);
}
 
function fermer()
{
 window.close();
}
 
//-->
</script>
 
 
</head>
 
<body onload="charge()" onunload="decharge()">
 
Nom de la ville à ajouter&nbsp;:
<input type="text" value="" id="idText" size="40">
<br><br>
<input type="button" value="Ajouter" onclick="ajouterVille()">
<input type="button" value="Fermer fenêtre" onclick="fermer()">
 
 
</body>
 
</html>

**achos** · 27/02/2007, 12h07

Merci bcp pour votre réponse.
ça marche trés bien avec IE, je veux seulement savoir si je peut faire apparaitre la ville que j'ai ajouter comme option par défaut (selected=selected) lorsque je revient a ma page d'index.

Merci encore

**Auteur** · 27/02/2007, 12h22

Envoyé par achos

Merci bcp pour votre réponse.
ça marche trés bien avec IE, je veux seulement savoir si je peut faire apparaitre la ville que j'ai ajouter comme option par défaut (selected=selected) lorsque je revient a ma page d'index.

Merci encore

Je savais que tu allais me demander ça

dans index.html : après l'insertion dans la liste, met l'option en "selected".

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function ajouter(ville)
{
  var liste = document.getElementById("choix");
  var elOption = new Option(ville, ville, false, false);
 
  //Ajout dans le select de l'option
  liste.options.add(elOption);  //insertion de l'option
elOption.selected = "selected"; //la selectionner ensuite

  alert(ville+" a été ajoutée à la liste");
 
}

Par contre, si il y a une option sélectionnée, je me demande si tu ne dois pas la déselectionner avant, et donc parcourir toute la liste et faire pour chaque option (j'ai un doute sur le code):

Code :

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

1
2
for (i=0; i<liste.options.length;i++)
liste.options[i].selected="";

**achos** · 27/02/2007, 13h48

merci bien

té le meilleure
Et qu'est ce que vous pensez du script que j'ai envoyé sur l'autre forum.

et comment je peux ajouter l'option selected dans mon script.
Le voilà mon script =

index.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<form name="f_ajout">
<label> Ville : 
	<select name="ville">
		<option value="rabat">rabat</option>
		<option value="rabat">paris</option>
		<option value="rabat">rome</option>
	</select>
</label>
<input type=button value="new" onClick="window.open('popup.html','ajouter_ville','width=200,height=200,top=200,left=300').focus();"><br>
</form>

popup.html

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
 
<html>
<head>
<title>Ajouter une ville</title>
<script language="javascript">
	function Valider(form){
		var bval = true;
 
			if (form.champ.value=="" && bval){
				alert('Veuillez saisir la ville');
				bval = false;
				form.champ.focus();
			}
 
			if (bval){
 
				var nouvelleOption = window.opener.document.createElement("option");
				  nouvelleOption.value = form.elements['champ'].value;
				  nouvelleOption.appendChild(window.opener.document.createTextNode(form.champ.value));
				  window.opener.document.forms["f_ajout"].ville.appendChild(nouvelleOption);
				} 
 
		return bval
	}
</script>
</head>
 
<body onLoad="document.f1.champ.focus();">
<form name="f1" onSubmit="return Valider(this);">
<h4>Ajouter une ville</h4>
<input type="text" name="champ">
<input type="submit" value="Enregistrer" onClick="self.close();">
</form>
</body>
</html>

merci infiniment

**achos** · 27/02/2007, 16h31

j'ai trouvé il suffit juste d'ajouter :

Code :

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

1
2
 
nouvelleOption.selected = 'selected';

je me suis inspiré

du script que vous m'avez donné merci bcp.
même si j'ai une option déjà sélectionnez par défaut, elle est remplacer par celle que je vient d'ajouter.
j'ai tester ce script avec IE et FF et il fonctionne à merveille.

Thank you very much

**E.Bzz** · 27/02/2007, 16h35

Envoyé par achos

même si j'ai une option déjà sélectionnez par défaut, elle est remplacer par celle que je vient d'ajouter.

Tu es sûr que c'est pas juste le 1° "selected" qui est pris ?
En tous cas c'est le cas si tu le fais en dur (en HTML) ...

A+

**achos** · 27/02/2007, 16h49

avant d'appeler la popup j'ai une option "choisir" sélectionner par défaut (selected='selected').
aprés l'appel de la page popup et on ajoutant la nouvelle option je lui attribut la methode (selected='selected') et elle est automatiquement sélectionneé à la place de l'ancienne option qui est "choisir".
c'est comme ça que ça marche et je ne voit pas où se trouve le pb.

**Auteur** · 27/02/2007, 16h53

Envoyé par E.Bzz

Tu es sûr que c'est pas juste le 1° "selected" qui est pris ?
En tous cas c'est le cas si tu le fais en dur (en HTML) ...

A+

c'est pour ça que je lui proposait de "déselectionner" les autres options avant de faire un selected sur l'option ajoutée. Ceci dit, sa liste n'a pas l'attribut "multiple" donc a priori la dernière option sélectionnée annule la sélection de la précédente.

**achos** · 27/02/2007, 17h26

Oui c'est tout à fait comme ça.
d'ailleur j'ai aucun pb et ca marche trés bien que ça soit IE ou FF

Merci

[Syntaxe]rafraichir une liste avec internet explorer

JavaScript

Discussions similaires

Partager

Partager