question sur un code proposé dans la FAQ

**Sh4dow49** · 07/04/2009, 11h54

Bonjour,

j'ai testé le code suivant de la FAQ, mais celui ci me pose un problème.

Au niveau de la compréhention, aucun problème il est plutot simple, mais le alert de la fin me renvoie ceci :

undefined is selected
undefined is selected
undefined is selected

(une ligne par option sélectionnée, donc ici exemple avec 3 éléments sélectionnés).

Je ne vois pas trop d'ou vient le problème, si c'est une erreur dans le code de la FAQ car je l'ai recopié texto à part une chose : j'ai remplacé

Code :

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

var selectBox = document.forms[0].monSelect;

par

Code :

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

var selectBox = document.getElementById("ma_liste");

mais cela devrait fonctionner de la même façon (d'ailleurs ça marche très bien car je le fais par la suite dans mon script et je n'ai aucun problème avec le reste).

Voyez vous quoi faire pour améliorer le script et qu'il me renvoie bien les valeurs ?

Merci d'avance

**E.Bzz** · 07/04/2009, 12h03

Bonjour,
et tu as bien ajouté un id="ma_liste" à ton select ?
Cet id étant unique dans la page ?

A+

**Sh4dow49** · 07/04/2009, 12h49

mais cela devrait fonctionner de la même façon (d'ailleurs ça marche très bien car je le fais par la suite dans mon script et je n'ai aucun problème avec le reste).

donc oui je l'ai bien ajouté ^^

le problème ne vient pas de la je pense, sinon il ne saurait même pas combien d'options ont été sélectionnées dans la liste

**SpaceFrog** · 07/04/2009, 13h10

Code :

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

var selectBox = document.forms[0].elements['monSelec']t;

**Sh4dow49** · 07/04/2009, 13h29

Ca ne marche pas non plus

J'ai essayé en mettant le nom de la liste et l'id et le résultat est le même dans les deux cas (mais je crois que cette syntaxe utilise le nom de l'élément plutot que son id c'est bien ça ?)

Si ça peut aider, voici le code que j'ai essayé

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
 
 
var selectedApps = new Array();
var selectBox = document.forms[0].elements["list_name"];
for (var i=0; i<selectBox.options.length; i++) {
  if (selectBox.options[i].selected) {
    selectedApps .push(selectBox.options[i]);
    alert(selectBox.options[i].value);
  }
}
var alertTxt = "";
for (opt in selectedApps ) {
alertTxt += opt.value+" is selected\n";
}
alert(alertTxt);

l'alert dans la première boucle renvoie bien le nom de chaque valeur sélectionnée, la deuxième boucle ne met que des undefined ...

J'ai également essayé en déclaration de liste (comme je l'avais dis dans le premier message) :

Code :

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

var selectBox = document.getElementById("list_id");

déclaration qui marche parfaitement dans d'autres boucles du même genre plus loin dans ma fonction javascript ...
Je pense que le problème vient plutôt de l'array en lui même non ?

Car j'ai essayé ceci à la place :

Code :

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

selectedApps .push(selectBox.options[i].value);

pour stocker juste la valeur, et donc pour l'affichage :

Code :

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

alertTxt += opt+" is selected\n";

plus besoin du .value donc, mais cette fois il renvoie à la place le numéro de la ligne de l'array dans lequel la valeur est contenue (et en ajoutant .value je retrouve mes undefined)

Je ne vois vraiment pas ...

**SpaceFrog** · 07/04/2009, 13h30

sasn voir le html du form c'est difficile à dire ...

**Sh4dow49** · 07/04/2009, 13h43

Je vais donner tout le code utilisé dans cette action (en simplifié).

Le code du morceau de formulaire :

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
<tr><td>applications : </td><td id="formApplicationList"><select name="appProjNames[]" multiple="multiple" id="appProjName" style="width:100%;height: 200px;">
<?php
        //we will display a list which contains all the application's names
        
        $sqlRequest = 'requete';
        $res = request($connect, $sqlRequest);
        
        while ($application = oci_fetch_assoc($res['stmt']))
        {
                echo '<option value="'.rawurlencode($application['PROJNAME'].'|'.$application['APPNAME']).'" '.$selected.' > &nbsp;  &nbsp;  &nbsp; '.$application['APPNAME'].'</option>';
        }
?>
</select></td></tr>
<tr><td>réseaux : </td><td><select name="networks[]" multiple="multiple" id="networks" style="width:100%;height: 200px;" onchange="formAppList()" >
<?php
        //we will display a list which contains all the application's names
        
        $sqlRequest = 'requete';
        $res = request($connect, $sqlRequest);
        
        while ($networks = oci_fetch_assoc($res['stmt']))
        {
                echo '<option value="'.$networks['ID'].'" >'.$networks['NOM'].'</option>';
        }
?>
</select></td></tr>

Le code de la fonction JS "formAppList()" :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
function formAppList()
{
	var xhr = getXhr();
	var selectedApps = new Array();
	var networks = '';
	var text = '';
 
	//we choose as selectBox the applications listbox
	var selectBox = document.forms[0].elements["appProjName"];
	for (var i = 0; i < selectBox.options.length; i++)
	{
		if (selectBox.options[i].selected)
		{
			selectedApps.push(selectBox.options[i].value);
			alert(selectBox.options[i].value+" is selected");
		}
	}
 
	for (opt in selectedApps)
	{
		text += opt.value+" is selected\n";
	}
	alert(text);
 
	//we choose as selectBox the network listbox
	selectBox = document.getElementById("networks");
	for (var i = 0; i < selectBox.options.length; i++)
	{
		if (selectBox.options[i].selected)
		{
			networks += selectBox.options[i].value+",";
		}
	}
 
	document.getElementById('formApplicationList').innerHTML = '';
 
	//on affiche une image indiquant le chargement
	document.getElementById('loadimg').className = 'loading';
 
	// On defini ce qu'on va faire quand on aura la reponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			//on cache l'image de chargement
			document.getElementById('loadimg').className = 'noloading';
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById("formApplicationList").innerHTML = leselect;
 
			selectBox = document.getElementById("appProjName")
			for (var i = 0; i < selectBox.options.length; i++)
			{
				for (opt in selectedApps)
				{
					if (opt == selectBox.options[i].value)
					{
						selectBox.options[i].selected = true;
						break;
					}
				}
			}
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","formApplicationList.php",true);
	// ne pas oublier ca pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("networks="+networks);
}

et le code de la page formApplicationList.php :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<?php
	/**
	* This script modify the selected applications in the listbox of the forms to add simple and CSC RFCs
	*/
 
	if (isset($_POST['networks']))
	{
		require_once("../../scripts/functions.php");
		require_once("../../scripts/values.env");
 
		$networks = unescapeForm($_POST['networks']);
		$networks = explode(",", $networks);
 
		$connect = connection();
 
		//we create the request according to the parameters we getted
		if count($networks) == 0)
		{
			$sqlRequest = 'requete';
		}
		else
		{
			$sqlRequest = 'requete';
		}
		$res = request($connect, $sqlRequest);
 
		$apps = array();
		$i = 0;
		while ($result = oci_fetch_assoc($res['stmt']))
		{
			$apps[$i]["appname"] = $result['APPNAME'];
			$apps[$i]["projname"] = $result['PROJNAME'];
			$i++;
		}
 
		oci_free_statement($res['stmt']);
 
		$sqlRequest = 'requete';
		$res = request($connect, $sqlRequest);
 
			while ($application = oci_fetch_assoc($res['stmt']))
			{
				//we look if there are applications concerned
				if (count($apps) > 0)
				{
					//we check if the application is in the list
					for ($i = 0; $i < count($apps); $i++)
					{
						//if the application is in the list, we select the option
						if ($apps[$i]["appname"] == $application['APPNAME'] && $apps[$i]["projname"] == $application['PROJNAME'])
						{
							$selected = 'selected="selected"';
							break;
						}
						else
						{
							$selected = '';
						}
					}
				}
 
				echo '<option value="'.rawurlencode($application['PROJNAME'].'|'.$application['APPNAME']).'" '.$selected.' > &nbsp;  &nbsp;  &nbsp; '.$application['APPNAME'].'</option>';
			}
 
			echo '</select>';
		}
 
		deconnection($connect, $res['stmt']);
	}
?>

Tout fonctionne correctement sauf la partie récupération des options déjà sélectionnées avant l'appel de la fonction (pour les resélectionner par la suite).

**Bovino** · 07/04/2009, 14h10

Code :

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

selectedApps.push(selectBox.options[i].value);

puis :

Code :

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

text += opt.value+" is selected\n";

c'est à dire le value d'un value donc undefined

**Sh4dow49** · 07/04/2009, 14h19

j'ai essayé autre chose.

J'ai gardé le

Code :

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

selectedList.push(selectBox.options[i]);

et le

Code :

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

alertTxt += "L'option "+opt.value+" est selectionnée \n";

mais j'ai généré le alertText dans un for classique au lieu du for de l'exemple dans la FAQ :

Code :

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

for (var i = 0; i< selectedApps.length; i++)

au lieu de

Code :

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

for (opt in selectedApps)

et la je récupère bien les valeurs !

Par contre, maintenant, j'ai un deuxième problème, à cet endroit :

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
// On defini ce qu'on va faire quand on aura la reponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			//on cache l'image de chargement
			document.getElementById('loadimg').className = 'noloading';
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById("formApplicationList").innerHTML = leselect;
 
			selectBox = document.getElementById("appProjName")
			for (var i = 0; i < selectBox.options.length; i++)
			{
				for (var y = 0; y < selectedApps.length; y++)
				{
					if (selectedApps[y].value == selectBox.options[i].value)
					{
						selectBox.options[i].selected = true;
						break;
					}
				}
			}
		}
	}

dans la fonction JS. Plus particulièrement, le code de la boucle for. Il est ici pour resélectionner les options qui étaient déjà sélectionnées avant d'appeler la page formApplicationList.php, mais ne fait pas son travail correctement.

En fait il ne garde que la première option en mémoire (alors que dans la boucle d'affichage que j'ai modifié j'ai bien toutes les options) => découvert en faisant un

Code :

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

alert(selectedApps[y].value);

dans la deuxième boucle for du code ci dessus => la valeur est tout le temps la même

**Sh4dow49** · 07/04/2009, 14h24

Erreur de ma part, j'ai écris dans mon code

Code :

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

for (var y = 0; y < selectedApps.length; i++)

j'incrémentais donc le i au lieu du y ...

Tout fonctionne correctement maintenant. Merci pour vos réponses qui m'ont fais avancées

question sur un code proposé dans la FAQ

JavaScript

Discussions similaires

Partager

Partager