Select Chainée Erreur IE ! XMLHTTPREQUEST

**spax** · 26/11/2008, 12h40

Bonjour
mon problème est pour pas changer lié aux différences entre IE et FF :
Situation :
j'ai 3 select que je veut chainer :
1-Select Site :
2- Select Serveur (disponible au site )
3- Select feature (fonction disponible sur le serveur )

Avec FF tout marche bien ,
Avec IE la première dépendance se fait :

Donc en sélectionnant le Site la liste des serveurs est mise a jour .
Mais en continuant et sélectionnant Un serveur rien ne se passe sur la 3Eme select ( donc features ).

je précise que j'utilise strictement le même procéder en ce qui concerne le JS et le PHP pour gérer la dépendance entre les 3 select.

Néanmoins ce que j'ai remarquer c'est que quand la 2Eme select est mise a jour si je lance un Onchange="getValue()" une simple fonction pour avoir la valeur du selectedIndex ça me donne RIEN sous IE pourtant le SelectedIndex est bien une valeur >0 !!

Voici le code :

le javascript :

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
72
73
74
75
76
77
78
 
/*************************************************************************************************
* Function  : setXhr()
*  Init an XMLHTTPREQUEST
*
**************************************************************************************************/
function setXhr()
{
	var xhr;
	if(window.XMLHttpRequest) // FIREFOX
		xhr = new XMLHttpRequest();
	else 
		if(window.ActiveXObject) // IE
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		else 
		{ // XMLHttpRequest non supporté par le navigateur  
		} 
	return xhr;
}
 
/*************************************************************************************************
* Function  : getServer()
* Dynamically got server's list for a given site
*
**************************************************************************************************/
 
function getServer()
{
	var f = document.forms["showData"] ;
	var s1 = f.elements["lssite"];
	var s2 = f.elements["lsserver"];
	var index = s1.selectedIndex;
if(index<0)
	f.elements["lsserver"].options.length = 0; 
	else
	{
	var xhr = setXhr();
	xhr.open("POST", "include/filteredserver.php", true); 
	xhr.onreadystatechange = function() { 
	      if(xhr.readyState == 4) 
	         eval(xhr.responseText); 
	   } 
 
	   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	   var data = "site="+escape(s1.options[index].value)+"&form="+f.name+"&select=lsserver";
	   xhr.send(data); 
	}
 
}
 
/*************************************************************************************************
* Function  : getSFeature()
* Dynamically got features 's list for a given server
*
**************************************************************************************************/
 
 
function getSFeature()
{
	var f = document.forms["showData"] ;
	var s1 = f.elements["lsserver"];
	var s2 = f.elements["lsfeature"];
	var index = s1.selectedIndex;
	if(index<0)
	f.elements["lsfeature"].options.length = 0; 
	else
	{
	var xhr = setXhr();
	xhr.open("POST", "include/filteredserver.php", true); 
	xhr.onreadystatechange = function() { 
										if(xhr.readyState == 4) 
								         eval(xhr.responseText); 
										}
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
		var data = "server="+escape(s1.options[index].value)+"&form="+f.name+"&select=lsfeature";
		xhr.send(data);
	}
}

Le php pour générer les nouvelles valeurs du select

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
 
 
<?php
header('Content-type: text/html; charset=iso-8859-1'); 
include("dbmanager.php");
dbconnect();
if(isset($_POST[site]))
{
$site = $_POST[site];
$requete = ($site == "All")? "SELECT DISTINCT name FROM server" : "SELECT name FROM server WHERE site='$site'";
$result = request($requete);
        echo 'var o = null;'; 
        echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];'; 
        echo 's.options.length = 0;'; 
        echo 's.options[s.options.length] = new Option("All");'; 
        while($r = mysql_fetch_array($result)) 
            echo 's.options[s.options.length] = new Option("'.$r[0].'");'; 
 
}
if(isset($_POST[server]))
{
        $server = $_POST[server];
        $requete = ($site == "All")? "SELECT DISTINCT name FROM features where server!='local'" : "SELECT name FROM features WHERE server='$server'";
        $result = request($requete);
        echo 'var o = null;'; 
        echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];'; 
        echo 's.options.length = 0;'; 
        echo 's.options[s.options.length] = new Option("All");'; 
        while($r = mysql_fetch_array($result)) 
        echo 's.options[s.options.length] = new Option("'.$r[0].'");'; 
}
        dbclose();
?>

Et finalement le HTML du depart :

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
 
<form name='showData' method="POST" action="index.php?page=data">
	<p>
	<table class = "specTable">
	<tbody class = "specBody">
	<tr>
	<td>
	<label>Site</label>
	</td>
	<td>
	<select name="site" id="lssite" onChange="getServer()">
	<option value="All">All</option>
	<?php
                        
        $rep = request("SELECT DISTINCT site FROM server");
        while($data = mysql_fetch_array($rep))
        {
                if(isset($chsite) && $data[0] == $chsite)
                echo "<option value='".$data[0]."' selected='selected'>".$data[0]."</option>";
                else
                echo "<option value='".$data[0]."'>".$data[0]."</option>";
        }
        ?>
	</select>
	</td>
	<td>
	<label>Server</label>
	</td>
	<td>
	<select name="server" id="lsserver" onChange="getSFeature()">
	<option value="All">All</option>
	<?php
        $query = $chsite != "All" ? "SELECT DISTINCT name FROM server WHERE site='$chsite' ORDER BY 'name' ASC" : "SELECT DISTINCT name FROM server";
        $rep = request($query);
        while($data = mysql_fetch_array($rep))
        {
                if(isset($chserver) && $data[0] == $chserver)
                echo "<option value='".$data[0]."' selected='selected'>".$data[0]."</option>";
                else
                echo "<option value='".$data[0]."'>".$data[0]."</option>";
        }
        ?>
	</select>
	</td>
	<td>
	<label>Feature</label>
	</td>
	<td>
	<select name="feature" id ="lsfeature">
	<option value="All">All</option>
	<?php
        $query = $chserver != "All" ? "SELECT DISTINCT name FROM features WHERE server='$chserver' ORDER BY 'name' ASC" : "SELECT DISTINCT name FROM features WHERE server!='local'";
        $rep = request($query);
        while($data = mysql_fetch_array($rep))
        {
                if(isset($chfeature) && $data[0] == $chfeature)
                echo "<option value='".$data[0]."' selected='selected'>".$data[0]."</option>";
                else
                echo "<option value='".$data[0]."'>".$data[0]."</option>";
        }
        ?>
	</select>
	</td>
	<td>
	<input type="button" value="Go !" onclick ="validate()" />
	</td>
	</table>
	</p>
	</form>

Merci pour l'aide

**SpaceFrog** · 26/11/2008, 12h46

Code :

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

 eval(xhr.responseText);

au secours !!!

c'est la pire des choses à faire ...
ajax ne doit retourner que des paramètres ou eventuellement du code html, mais en aucun cas du js à interpréter !

as tu regardé les tutos proposés sur ce forum pour les listes liées avec ajax ...

**spax** · 26/11/2008, 15h06

Ok ,
je ne sais pas pourquoi cela est dangereux .
en tous cas j'ai effectuer des modification pour retourné une chaine
Name1|Name2|....|NameLast
puis faire un split

( plus de JS a exécuter ).

MAIS j'ai toujours le même problème sur FF ca marche mais pas sur IE en effet on dirai que IE ne prend pas en compte le changement dans le SELECT au milieu ? donc même si il est afficher plein et que IE peut renvoyé SelectedIndex elle renvoie null en parallèle comme valeur .
voila le nouveau code :

PHP : génération des nouvelles fonctions

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
 
<?php
include("dbmanager.php");
dbconnect();
if(isset($_GET[site]))
{
$site = $_GET[site];
$requete = ($site == "All")? "SELECT DISTINCT name FROM server" : "SELECT name FROM server WHERE site='$site'";
$rep = request($requete);
while($data = mysql_fetch_array($rep))
        echo "$data[0]|";
 
}
if(isset($_GET[server]))
        {
        $server = $_GET[server];
        $requete = ($site == "All")? "SELECT DISTINCT name FROM features where server!='local'" : "SELECT name FROM features WHERE server='$server'";
        $rep = request($requete);
        while($data = mysql_fetch_array($rep))
                echo "$data[0]|";
        dbclose();
        }
?>

Puis les fonctions Java script :

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
 
 
/*************************************************************************************************
* Function  : setXhr()
*  Init an XMLHTTPREQUEST
*
**************************************************************************************************/
function setXhr()
{
	var xhr;
	if(window.XMLHttpRequest) // FIREFOX
		xhr = new XMLHttpRequest();
	else 
		if(window.ActiveXObject) // IE
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		else 
		{ // XMLHttpRequest non supporté par le navigateur  
		} 
	return xhr;
}
 
/*************************************************************************************************
* Function  : getServer()
* Dynamically got server's list for a given site
*
**************************************************************************************************/
 
function getServer()
{
	var site = document.getElementById("lssite").options[document.getElementById("lssite").selectedIndex].value;					
	var xhr = setXhr();
	xhr.open("GET", 'include/filteredserver.php?site='+site,false);
	xhr.send(null);
	var tab = xhr.responseText.split("|");
	var liste = document.getElementById("lsserver");
	liste.options.length = 0;
	liste.options[0] = new Option("All");
	for(var i=0;i<tab.length-1;i++)
		{
		liste.options[i+1] = new Option(tab[i]);
		}
}
 
/*************************************************************************************************
* Function  : getFeatures()
* Dynamically got features 's list for a given server
*
**************************************************************************************************/
 
function getSFeature()
{
	var server = document.getElementById("lsserver").options[document.getElementById("lsserver").selectedIndex].value;					
	var xhr = setXhr();
	xhr.open("GET", 'include/filteredserver.php?server='+server,false);
	alert('include/filteredserver.php?server='+server);
	xhr.send(null);
	var tab = xhr.responseText.split("|");
	var liste = document.getElementById("lsfeature");
	liste.options.length = 0;
	liste.options[0] = new Option("All");
	for(var i=0;i<tab.length-1;i++)
		{
		liste.options[i+1] = new Option(tab[i]);
		}
}

Alors ?

**Bovino** · 26/11/2008, 15h27

elle renvoie null en parallèle comme valeur

C'est normal :

Code :

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

liste.options[i+1] = new Option(tab[i]);

new Option prend en paramètres le texte de l'option puis son value, donc si tu ne précises qu'un seul argument, il n'y a pas de value.

Ensuite, fais attention, il faut effectuer ta mise à jour au readyState 4, sinon tu auras des soucis sans ton alert car les données ne seront pas disponibles au moment où tu veux les traiter !

**SpaceFrog** · 26/11/2008, 15h36

Un petit tour par là ne te fera pas de mal
http://siddh.developpez.com/articles/ajax/

**DoubleU** · 26/11/2008, 15h38

Envoyé par SpaceFrog

Code :

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

 eval(xhr.responseText);

au secours !!!

c'est la pire des choses à faire ...
ajax ne doit retourner que des paramètres ou eventuellement du code html, mais en aucun cas du js à interpréter !

as tu regardé les tutos proposés sur ce forum pour les listes liées avec ajax ...

C'est quoi le problème avec eval(xhr.responseText) ?

**SpaceFrog** · 26/11/2008, 15h45

eval is evil quand c'est utilisé n'importe comment !
je deconseille fortement de mettre du string de code et d'en faire un eval ...
mieux vaut 100 fois avoir le code sur la page et ne lui passer que les paramètres dont il a besoin (serialisation ou split ...)
Avoir besoin de faire un eval d'une fonction en retour de code ajax est selon moi une erreur de codage.
autant avoir differents scripts externes et les activer selon les besoins ..

**spax** · 26/11/2008, 15h45

Merci c'était la bonne solution.

voici le code JS ça peut intéresser quelqu'un .

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
 
 
/*************************************************************************************************
* Function  : getServer()
* Dynamically got server's list for a given site
*
**************************************************************************************************/
 
function getServer()
{
	var site = document.getElementById("lssite").options[document.getElementById("lssite").selectedIndex].value;					
	var xhr = setXhr();
	xhr.open("GET", 'include/filteredserver.php?site='+site,true);
	xhr.onreadystatechange = function()
									{
										if (xhr.readyState == 4) 
											if (xhr.status ==200) 
											{
												var tab = xhr.responseText.split("|");
												var liste = document.getElementById("lsserver");
												liste.options.length = 0;
												liste.options[0] = new Option("All");
												for(var i=0;i<tab.length-1;i++)
													{
														liste.options[i+1] = new Option(tab[i] , tab[i]);
													}
											}
									}
	xhr.send(null);
 
}
 
/*************************************************************************************************
* Function  : getFeatures()
* Dynamically got features 's list for a given server
*
**************************************************************************************************/
 
function getSFeature()
{
	var server = document.getElementById("lsserver").options[document.getElementById("lsserver").selectedIndex].value;					
	var xhr = setXhr();
	xhr.open("GET", 'include/filteredserver.php?server='+server,true);
	xhr.onreadystatechange = function()
									{
										if (xhr.readyState == 4) 
											if (xhr.status ==200) 
											{
												var tab = xhr.responseText.split("|");
												var liste = document.getElementById("lsfeature");
												liste.options.length = 0;
												liste.options[0] = new Option("All");
												for(var i=0;i<tab.length-1;i++)
													{
														liste.options[i+1] = new Option(tab[i] , tab[i]);
													}
											}
									}
	xhr.send(null);
}

Select Chainée Erreur IE ! XMLHTTPREQUEST

JavaScript

Discussions similaires

Partager

Partager