Discussion :

[Geo-x]

Bonjour @ tous.

J'ai créé dans ma page index.php, une zone de liste liée avec AJAX qui fait que lorsque je sélectionne une valeurs dans cette zone de liste 1 une zone de liste 2 apparait.

Jusque là, aucun problème.

Le problème arrive lorsque je tente de faire la même chose à partir de la zone de liste 2 pour faire apparaitre une zone de liste 3, ça ne fonctionne pas !

Au niveau du code de mon index.php j'ai :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id='choix_utilisateur_mcd'>
	<!-- Création de la zone de liste pour choisir le MCD à l'ouverture de mon index.php + AJAX-->
<?php
include 'statistiques_choix_mcd.php';
?>
</div>
<div id='choix_utilisateur_table'>
	<!-- Création de la zone de liste pour choisir la table en fonction du MCD lorsque je sélectionne ma première valeur -->
</div>
<div id='choix_utilisateur_champ'>
	<!-- Création de la zone de liste pour choisir le champ en fonction de la table - qui ne fonctionne pas-->
</div>

Dans mon premier include, je génère ma première zone de liste à l'ouverture et sur l'événement : onchange je génère ma seconde zone de liste dans le div choix_utilisateur_table.

Comme je disais, là aucun problème. Pour générer cette seconde zone de liste, je fais appel à un fichier PHP similaire à celui de l'include (en dehors des ID que je modifie bien entendu). Il contient, à la fois la requête qui me génère la zone de liste et à la fois le script pour le JavaScript et l'Ajax :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$dbconnect = pg_connect("host=localhost port=5432 dbname=mybdd user=postgres password=azerty");
$requete = "SELECT value,libelle FROM table WHERE champ = '" . addslashes($_POST['var']) . "';";
$resultat = pg_query($dbconnect,$requete) or die(pg_errormessage());
echo "<form id='choix_table' method='POST'>
	<table><tr><td>
	<select align='top' name='zlchoix_table' id='idzlchoix_table' maxlength='80'>";
while ($row=pg_fetch_array($resultat)){
	print ("<br><option value=".$row["value"].">".$row["libelle"]);
}
echo"</select></td></tr>
	</table>
	</form>";
pg_close($dbconnect);
?>

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
function choixzltable(value){
	var xhr = new XMLHttpRequest();
	xhr.open ('POST','statistiques_choix_champ.php');
	var value1 = encodeURIComponent(value);
	xhr.onreadystatechange  = function(){
		if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)){
			document.getElementById('choix_utilisateur_champ').innerHTML = xhr.responseText;
		}
	}
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send('var_table=' + value1);
}
(function() {
	var inputs1 = document.getElementById('idzlchoix_table');
	inputs1.onchange = function() {
		choixzltable (this.value);
	}
})();

J'ai testé de faire un alert sur ma variable inputs1, mais je vois bien que l'événement onchange ne fonctionne pas. C'est pour cette raison que j'en déduis que c'est le script qui ne fonctionne pas.

Mais ce que je ne comprend pas, c'est que j'ai fais quelques tests complémentaires peu concluants :

J'ai tenté un include de mon deuxième php dans mon index.php mais ça ne fonctionne pas plus.

J'ai tenté d'intégrer directement dans mon index.php le script, sans plus de résultat...

Est-ce que vous auriez une idée de l'origine du problème ?

Par avance merci.

Geo-x

[Geo-x]

J'ai réussi à contourner le problème sans trouver d'explication en tant que telle.

Pour ça, j'ai supprimé la partie de code qui indique que l'on veut un événement sur changement :

Code :

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

1
2
3
4
5
6
(function() {
	var inputs1 = document.getElementById('idzlchoix_table');
	inputs1.onchange = function() {
		choixzltable (this.value);
	}
})

Pour rajouter un onchange dans mon select du code PHP :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$dbconnect = pg_connect("host=localhost port=5432 dbname=mybdd user=postgres password=azerty");
$requete = "SELECT value,libelle FROM table WHERE champ = '" . addslashes($_POST['var']) . "';";
$resultat = pg_query($dbconnect,$requete) or die(pg_errormessage());
echo "<form id='choix_table' method='POST'>
	<table><tr><td>
	<select align='top' name='zlchoix_table' id='idzlchoix_table' maxlength='80' onchange='choixzltable(this.value)'>";
while ($row=pg_fetch_array($resultat)){
	print ("<br><option value=".$row["value"].">".$row["libelle"]);
}
echo"</select></td></tr>
	</table>
	</form>";
pg_close($dbconnect);
?>

Et là, aucun problème...mais je ne comprend toujours pas pourquoi ça ne fonctionnait pas avant, et ça ça m'agace , alors si vous avez des suggestions, je suis preneur !

Par avance merci.

Geo-x

[NoSmoking]

Bonjour,

Et là, aucun problème...mais je ne comprend toujours pas pourquoi ça ne fonctionnait pas avant, et ça ça m'agace , alors si vous avez des suggestions, je suis preneur !

si l'on prend ce passage de ton code

Code :

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

1
2
3
4
5
6
(function() {
	var inputs1 = document.getElementById('idzlchoix_table');
	inputs1.onchange = function() {
		choixzltable (this.value);
	}
})();

il s'effectue au chargement de la page et ce bien avant que ton SELECT n'appartienne au DOM donc erreur.