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