Discussion :

[ThinKiT]

Bonjour à tous,

J'ai un petit soucis avec AJAX en ce moment. J'ai réalisé grâce à un tuto que j'ai trouvé sur ce site, un script qui permet de trouver la liste des provinces d'Italie depuis une liste des régions. J'ai donc lié mes 2 listes déroulantes qui représentent ces données. Cela fonctionne sous Firefox mais malheureusement pas sous Internet Explorer ... à mon grand désespoir.

Voici les 2 morceaux de codes :

Sur la page 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
 
<div class="ligne">
	<label>Regione di residenzia : </label>
    <select name="listeRegions" class="listeDeroulante" id="regions" onChange="getPronvinces()">
    <option selected>Séléctionnez une région</option>
	<?php
        //On appelle toutes les régions
        $sql = mysql_query("SELECT * FROM `region`");
        while($donnees = mysql_fetch_array($sql)){
                echo '<option id="'.$donnees['id_region'].'">'.$donnees['nom_region'].'</option>
        ';
        }
        ?>
    </select>
</div>
<div class="ligne">
	<p><em>Séléctionnez d'abord une région <strong>puis une province</strong></em></p>
</div>
<div class="ligne">
	<label>Provencia di residenzia : </label>
    <select name="listeProvinces" class="listeDeroulante" id="provinces">
    	<option selected>Séléctionnez d'abord une région</option>
        <!--Insertion des données AJAX concernant les provinces-->
    </select>
</div>

Et le code 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
 
// JavaScript Document
 
function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function getPronvinces(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			listeProvinces = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('provinces').innerHTML = listeProvinces;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","listage_provinces.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de l'auteur
	sel = document.getElementById('regions');
	idregion = sel.options[sel.selectedIndex].id;
	xhr.send("idRegion="+idregion);
}

Même si je ne pense pas que celui ci intervienne dans mon bug, je vous met le code PHP utilisé pour faire la requête :

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
 
<?php
	/*echo "idRegion : ".$_POST["idRegion"];*/
	if(isset($_POST["idRegion"])){
		mysql_connect("localhost","root","");
		mysql_select_db("candidatures");
		$res = mysql_query("SELECT id_province ,nom_province FROM province WHERE id_region_province = ".$_POST["idRegion"]." ORDER BY nom_province");
		if(mysql_fetch_assoc($res)>0){
			while($row = mysql_fetch_assoc($res)){
				echo "
				<option value='".$row["id_province"]."'>".utf8_encode($row["nom_province"])."</option>
				";
			}
		} else {
			echo "<option value='-1'>Pas de provinces</option>";
		}
	}
?>

Merci de votre aide ô combien précieuse

[Borowsky]

Oui j'ai eu le même problème. C'est qu'en fait avec Internet Explorer, tu ne peux afficher les informations de ta ResponseText que dans un "div". Or la tu insère dans un "select".

Lorsque que tu crée ton fichier texte avec les options, il faut en fait aussi créer le select.
Ensuite, dans ta page HTML, tu mes des id aux div dans lesquels tu veux afficher le select que tu aura créer.

J'espère que j'ai été clair

En gros, dans le fichier qui fait la requete, tu ajoute les balises <select> et </select> et ce que tu recoi dans le Javascript, tu l'insère dans un div et non dans un select.

Voila

PS : J'espère que c'est a cause de ca que ca bug...

[E.Bzz]

Bonjour,
utilise l'attribut value des options, plutôt que l'id dans le 1° select ...

A+

[ThinKiT]

La méthode de Borowsky fonctionne apparament Internet Explorer préfère dans une div.
Je n'ai donc pas testé ta solution E.Bzz surtout que cela m'arrange de récupérer l'id de ma région plutôt que son nom.

Merci à tous les 2 en tout cas (J'adore ce forum)

[E.Bzz]

Je n'ai donc pas testé ta solution E.Bzz surtout que cela m'arrange de récupérer l'id de ma région plutôt que son nom.

Ce n'est pas ce que je voulais dire
Pour stocker une info dans une option, on utilise l'attribut value et non l'id.

Un id doit être unique dans la page. En l'utilisant pour stocker une valeur, tu as de très (trop) gros risques de te retrouver avec des id dupliqués, ne serait-ce que pour les valeurs par défaut (peut être pas dans ce code-ci, mais ça viendra )

A+

[ThinKiT]

Ca y'es je viens de tomber dessus justement ^^
Je reviens pour te dire que tu avais raison

J'avais pas tout compris "à l'époque"
Merci