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
94
95
96
97
98
99
100
101
102
103
104
| <?php require_once('../Connections/accesville.php');
$Table="villes";
$champ_ville="nom_com";
$champ_cp="nom_ville";
?>
<?php
mysql_select_db($database_accesville, $accesville);
$champ_ville = mysql_real_escape_string(htmlspecialchars(stripcslashes($champ_ville)));
$query_Recordset1 = "SELECT DISTINCT $champ_ville FROM $Table ORDER BY $champ_ville ASC";
$Recordset1 = mysql_query($query_Recordset1, $accesville) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Script de listes deroulantes liees avec appel par AJAX, (evite le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
}
function traitementReponse(http_request,id_ecrire) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
</head>
<body>
<form name="test1" method="post" action="form2.php" >
<div id="id_list1">VILLES :<br>
<select name="niv1" id="id_niv1" onChange="makeRequest('ajaxreponse.php','id_niv1','id_list2')">
<option>-- Choisissez --</option>
<?php
while ($row=mysql_fetch_assoc($Recordset1)){
?>
<option value="<?php echo $row[$champ_ville]?>">
<?php echo $row[$champ_ville]?></option>
<?php
}
?>
</select>
<br><br>
</div>
<div id="id_list2">
<!-- ici sera charge la reponse mode texte de PHP à la request AJAX -->
</div>
</form>
</body>
</html>
<?php
mysql_free_result($Recordset1);
?> |
[AJAX] listes liées ajax transformable en autocompletion
Répondre avec citation
Envoyé par serna
Partager