[AJAX] liste dynamique restant vide >> XMLHTTPREQUEST
bonjour tout le monde,
Vous allez crier car c'est un problème récurrent sur les forums!
encore un soucis avec une liste traitée en ajax (sans xml :oops:),
j ai parcouru le web en m'inspirant de divers cours traitant de "xmlhttprequest"
mais je reste tout de même coincé depuis plus de 2 jour maintenant.
L'idée est d'entrer un code postal dans un champ texte,
puis de generer à coté une liste deroulante affichant le ou les résultats.
Je mets tous ce que j ai fais pour l instant:
La table SQL
Code:
1
2
3
4
5
6
7
|
CREATE TABLE `cpville` (
`idville` int(10) NOT NULL auto_increment,
`cp` varchar(5) NOT NULL default '',
`ville` varchar(20) NOT NULL default '',
PRIMARY KEY (`idville`,`cp`,`ville`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ; |
La page formulaire et le JS
Code:
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
|
<script language="Javascript" type="text/JavaScript">
var xhr = null;
function getXhr(){
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;
}
}
/* Méthode qui sera appelée sur le click du bouton*/
function go()
{
getXhr()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("CP").innerHTML;
// Texte renvoyé par la page cible (url_cible)
var valeur_retour = xhr.responseText;
document.getElementById("Ville").value = valeur_retour;
}
}
// envoi avec post
xhr.open("POST", "testcp.php", true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var sel = document.getElementById("CP");
id_dept = sel.value;
xhr.send('CP='+ id_dept);
}
<body> // formulaire
<form name="form" method="post" action="testcp.php">
<label>Secteur d'activité:</label>
<input type="text" size="5" name="cp" id="CP" onblur="go()" />
<div>
<select id ='ville' name='ville' >
<option value='-1'>Choisir un secteur</option>
</select></div> |
le traitement PHP SQL
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?php header('Content-type: text/html; charset=iso-8859-1');
// script PHP interrogation Base de donnees pour reponse a la requette AJAX
include ("connexion.php");
if(isset($_POST['CP'])){ //connexion à la base
$AccesBase = mysql_connect($host,$username,$passSQL);
mysql_select_db($bdd,$AccesBase);
$QuestionBase = "SELECT * FROM cpville WHERE cp =".$_POST['cp']."";
$result_recherche = mysql_db_query($bdd, $QuestionBase) or die (mysql_error());
// construction de la liste deroulante
while ($row=mysql_fetch_assoc($result_recherche)){
echo "<option>-- Choisissez --</option>";
echo "<option value='".$row["idville"]."'>".$row["ville"]."</option>";
}
}
?> |
Le problème est que la liste devant contenir le resultat reste vide.
la page PHP ne retourne pas d'erreur,
je pense que je n'arrive pas à manipuler la construction de ma liste via DOM peut etre.
en tous cas là je suis trop bloquer, j ai du oublier quelque chose, alors si un oeil vif en javascript arrive à desceller quelques erreurs, Merci d'avance.:D
