Discussion :

[Sh4dow49]

Bonjour,

Avant toute remarque je précise que j'ai déjà recherché sur le forum des posts similaires à mon problème mais qu'aucun n'a pu m'aider, et que j'ai déjà lu le cours sur les listes liées car je l'ai déjà mis en place et ça marchait.


Maintenant le pourquoi de mon post

Voila j'affiche trois listes déroulantes sur ma page, remplies via une requête SQL faite au serveur.

Lorsque je sélectionne une option dans la première liste, la deuxième se réduit comme je le veux.

Par contre, je cherche à updater en même temps la troisième liste.
Également, lorsque je sélectionne une option dans la deuxième, la troisième doit encore se modifier.

Pour plus de compréhension, la première liste correspond aux types, la deuxièmes aux projets et la troisième aux applications.
L'encapsulation est la suivante : les applis sont regroupées par projet, regroupés eux même par type.

En clair je souhaite que lorsqu'on sélectionne un type, on ne voit plus que les projets et les applis correspondantes, et idem entre les projets et les applis.


Voici mon code : (sans les options dans les listes pour ne pas encombrer)

Tout d'abord la page principale :

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
 
<div style="display:inline;" >
	<select name="appTypeName" onchange="updateProjectList(this.value);updateApplicationList(this.value, null);" >
	</select>
</div>
 
<div style="display:inline;" id="projectList" >
	<select name="projName" onchange="updateApplicationList(null, this.value);" >
	</select>
</div>
 
<div style="display:inline;" id="applicationList" >
	<select name="appName" >
	</select>
</div>

Ensuite le script javascript qui contient les 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
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
 
function getXhr() {
	var xhr = null;
	if(window.XMLHttpRequest) 
		xhr = new XMLHttpRequest();
	else if(window.ActiveXObject){ 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else {
		alert("Your browser doesn't support XMLHTTPRequest objects ...");
		xhr = false;
	}
	return xhr;
}
 
 
function updateProjectList(appTypeName){
	var xhr = getXhr();
 
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('projectList').innerHTML = '';
			document.getElementById('projectList').innerHTML = leselect;
		}
	}
 
	xhr.open("POST","projectList.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("appTypeName="+appTypeName);
}
 
 
function updateApplicationList(appTypeName, projName){
	var xhr = getXhr();
 
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('applicationList').innerHTML = '';
			document.getElementById('applicationList').innerHTML = leselect;
		}
	}
 
	xhr.open("POST","applicationList.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("appTypeName="+appTypeName+"&projName="+projName);
}

Je pense qu'il est inutile de mettre le script php qui update la liste des projets car cette partie fonctionne parfaitement, voila donc le script qui update la liste des applications :

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
 
<?php
	/**
	* This script modify the application list on the incident page according to the selected application's type and the selected project
	*/
 
	if (isset($_POST['appTypeName'] && isset($_POST['projName']))
	{
		require_once("../../scripts/functions.php");
		require_once("../../scripts/values.env");
 
		$appTypeName = unescapeForm($_POST['appTypeName']);
		$projName = unescapeForm($_POST['projName']);
 
		$connect = connection();
 
		//we will display a list which contains all the project's names
		echo '<select name="appName" >
				<option value="" ></option>';
 
		if ($projName == "" || $projName == null)
		{
			if ($appTypeName == "" || $appTypeName == null)
			{
				$sqlRequest = 'SELECT appName, projName FROM Application';
			}
			else
			{
				$sqlRequest = 'SELECT appName, projName FROM Application WHERE ProjName LIKE\'%'.escapeRequest($appTypeName).'/%\'';
			}
		}
		else
		{
			$sqlRequest = 'SELECT appName, projName FROM Application WHERE ProjName=\''.escapeRequest($projName).'\'';
		}
 
		$res = request($connect, $sqlRequest);
 
		//remplissage des listes
 
		echo '</select>&nbsp;';
	}
	echo 'ok';
?>

Voila. Ce que j'ai donc: la liste des projets est correctement updatée, mais la liste des applications disparait (et il n'y a aucune erreur javascript)

Merci d'avance pour votre aide car je cherche depuis hier soir sans résultat ...

[Bovino]

Je me trompe peut-être, mais l'ajout d'une valeur null dans l'url pose peut-être un problème ?

[E.Bzz]

Bonjour,
es-tu sûr que cette requête fonctionne

Code :

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

$sqlRequest = 'SELECT appName, projName FROM Application WHERE ProjName LIKE\'%'.escapeRequest($appTypeName).'/%\'';

Pour la tester, tape directement dans la barre d'adresse l'url qui la déclenche :

Code :

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

applicationList.php?appTypeName=appTypeName&projName=

En mettant pour appTypeName une value d'option de

Code :

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

<select name="appTypeName">

EDIT : effectivement, comme paramètre, '' serait peut-être préférable à NULL ...

A+

[Sh4dow49]

Alors pour la requête je suis sur de moi, je l'ai testé avant dans la console oracle elle me retourne bien ce que je souhaite.

J'ai essayé de remplacer le null par '' et j'ai le même résultat.


Enfin, j'ai essayé de saisir l'url directement et j'ai eu comme résultat une page vierge alors que j'ai mis un

Code :

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

echo 'ok';

à la fin en dehors du if (ce qui devrait afficher le ok dans tous les cas)
J'ai donc repassé tout le dernier script que je vous ai mi dans le 1er post et il s'est avéré qu'il manquait une parenthèse fermante .........
Il n'y a donc aucun problème javascript tout marche à merveille !

Merci à vous deux d'avoir répondu !