[AJAX] Listes liées + input

**jfox** · 21/08/2009, 11h31

Bonjour,

sur un formulaire j'ai 2 select et un input.
Quand je sélectionne un item du 1er select, pas de problème, le 2nd select se met à jour (merci siddh!).
Théoriquement, en changeant la valeur du 2nd select, une valeur devrait apparaître dans l'input. En pratique, rien ne se passe!

Avec cet excellent topic http://www.developpez.net/forums/d77...te-liees-ajax/, j'ai réussi à le faire mais avec 3 select

Merci de jeter un oeil sur les différents codes ci-dessous et m'indiquer ce que je fais de travers (ou que je n'ai pas compris!).

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
html>
<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			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 go(){
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var rst = xhr.responseText;
						document.getElementById('menu').innerHTML = rst;
					}
				}
 
				xhr.open("POST","ajaxMenu.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('theme');
				idtheme = sel.options[sel.selectedIndex].value;
				xhr.send("idtheme="+idtheme);
			}
 
			function go2(){
			var xhr = getXhr();
				xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					var rst2=xhr.rseponseText;
					document.getElementById('href').value=rst2;
					}
				}
			xhr.open("POST", "ajaxHref.php");
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			sel = document.getElementById('menu');
			idmenu = sel.options[sel.selectedIndex].value;
			xhr.send("idmenu="+idmenu);
			}
		</script>
	</head>
<?php
include('base.cnx.php');
 
$sqlTheme="select * from theme order by 1";
$rqTheme=mysqli_query($cnx,$sqlTheme) or die("Exécution de la requête rqTheme impossible");
 
?>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>T H E M E S</label>
				<select name='theme' id='theme' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?php
                                                while($dataTheme = mysqli_fetch_assoc($rqTheme)){
                                                        extract($dataTheme);
                                                        echo "<option value='".$thnum."'>".$thlibelle."</option>";
                                                }
                                        ?>
				</select>
				<label>Menu</label>
				<div id='menu' style='display:inline'>
				<select name='menu'  onchange="go2()">
					<option value='-1'>M E N U S</option>
				</select>
				</div>
				<div id="href" style='display:inline'>
				<input type="text" name="href">
				</div>
			</fieldset>
		</form>
	</body>
</html>

La 1ère page php appelée:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
?php
include('base.cnx.php');
$sqlMenu="select * from menu where metheme=".$_POST['idtheme'];
$rqMenu=mysqli_query($cnx,$sqlMenu) or die("Exécution de la requête rqMenu impossible");
 
echo "<select name='menu' onchange='go2()'>";
while($dataMenu = mysqli_fetch_assoc($rqMenu)){
		extract($dataMenu);
		echo "<option value='".$menum."'>".$melibelle."</option>";
	}
echo "</select>";
?>

La 2nde page php appelée:

Code :

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

1
2
3
4
5
6
7
8
9
 
<?php
include 'base.cnx.php';
$sqlHref="select mehref from menu where menum=".$_POST['idmenu'];
$rqHref=mysqli_query($cnx, $sqlHref) or die("Exécution de la requête rqHref impossible");
$dataHref=mysqli_fetch_assoc($rqHref);
extract($dataHref);
echo $dataHref;
?>

**jfox** · 24/08/2009, 08h24

J'ai continué de chercher et je pense que le problème est lié à l'innerHTML.
J'ai modifié la fonction et les fichiers php pour un traitement des réponses en XML et cela fonctionne.

[AJAX] Listes liées + input

AJAX

Vue hybride

Discussions similaires

Partager

Partager