question sur un code proposé dans la FAQ

Version imprimable

07/04/2009, 11h54
Sh4dow49

question sur un code proposé dans la FAQ

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 :

Citation:

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:

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

par

Code:

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
07/04/2009, 12h03
E.Bzz

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

A+
07/04/2009, 12h49
Sh4dow49

Citation:

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
07/04/2009, 13h10
SpaceFrog

Code:

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

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:

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:

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:

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

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

Code:

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

07/04/2009, 13h30
SpaceFrog

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

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

Le code du morceau de formulaire :

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

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:

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

07/04/2009, 14h10
Bovino

Code:

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

puis :

Code:

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

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

j'ai essayé autre chose.

J'ai gardé le

Code:

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

et le

Code:

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:

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

au lieu de

Code:

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:

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:

alert(selectedApps[y].value);

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

07/04/2009, 14h24
Sh4dow49

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

Code:

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