[AJAX] Affichage dynamique à partir d'une liste déroulante
Bonjour a tous,
Je suis étudiante en informatique mais encore novice, actuellement je suis en stage et je travaille sur un projet dans lequel dois pouvoir a partir d'une sélection dans une liste déroulante (que j'ai généré a partir de ma bdd) remplir automatiquement mon formulaire sans que la page se réactualise.
Pour faire simple j'aimerai en sélectionnant une personne dans ma liste déroulante que toute les informations la concernant (nom, adresse, téléphone...) apparaissent.
Il va de soit que je doit utilisé l'ajax et le java script, mais malheureusement malgré mais multiples tentatives j'arrive seulement à retourné la valeur "<gras>undefined</gras>" dans mes champs de texte pour mozilla, et rien du tout pour ie.
Voila mon code :
Code:
<select size="1" name="parentb" id="parentb" onchange="envoyerRequeteParentb(this.value, 'parentbis.php');">
Voila la requête envoyé via l'url :
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
|
<?php
//connexion à la base
include ('connect_bdd.php') ;
header("Cache-Control: no-cache, must-revalidate");//ceci oblige le navigateur à exectuer un script à chaque appel au lieu d'utiliser l'information présente dans son cache
header('Content-Type: text/plain; charset=ISO-8859-1');
if (isset($_POST['code']) && ($_POST['code'])!='')
{
$code=$_POST['code'];
}
else
{
$code="%";
}
//mise en place de la requete sql
$req=mysql_query("SELECT nomparentb, prenomparentb, adressepb, cpparentb, villeparentb, fixepb, portpb
FROM parentbis
WHERE codeparentbis = '$code'");
$pdt=mysql_fetch_assoc($req) or die(mysql_error());//mysql_fetch_assoc = mysql_fetch_array
if ($pdt)
{
$resultat=$pdt['nomparentb'].'*'.$pdt['prenomparentb'].'*'.$pdt['adressepb'].'*'.$pdt['cpparentb'].'*'.$pdt['villeparentb'].'*'.$pdt['fixepb'].'*'.$pdt['portpb'];
$pdt=mysql_fetch_assoc($req);
}
else
{
$resultat='';
}
while ($pdt)
{
$resultat=$pdt['nomparentb'].'*'.$pdt['prenomparentb'].'*'.$pdt['adressepb'].'*'.$pdt['cpparentb'].'*'.$pdt['villeparentb'].'*'.$pdt['fixepb'].'*'.$pdt['portpb'];
$pdt=mysql_fetch_assoc($req);
}
echo $resultat;
?> |
La fonction ajax appelé et celles qui en découlent :
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
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
|
function envoyerRequeteParentb (code, url)
{
//appel de la fonction getRequeteHttp pour obtenir un objet XMLHttpRequest
var requeteHttp=getRequeteHttp();
//une fois objet obtenu, on teste la valeur de l'objet
if (code != 'aucun' && code != 'effacer' && code != 'new')
{
if (requeteHttp==null)
{
alert("Impossible d'utiliser Ajax sur ce navigateur");
}
else // si la valeur incite a continuer...
{
if(navigator.appName == 'Microsoft Internet Explorer')
{
requeteHttp.open('POST',url,true);//... on ouvre la requete en parametrant la methode d'envoi des données au serveur, l'url de la page appelée, le mode d'appel (synchrone=false ou asynchrone=true)
requeteHttp.onreadystatechange=function() {recevoirReponseparentb(requeteHttp);};//...on utilise une fonction dite de callback : on envoie la requete en indiquant le nom de la fonction a appeler lorsque le resultat sera arrivé ; cela permet de ne pas attendre le resultat pour continuer.(necessaire en asynchrone)
requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// syntaxe necessaire pour la methode post : il faut parametrer l'en-tete utilisé par la requete
requeteHttp.send('code ='+escape(code));//...enfin on envoie la requete
}
else
{
requeteHttp.open('POST',url,false);//... on ouvre la requete en parametrant la methode d'envoi des données au serveur, l'url de la page appelée, le mode d'appel (synchrone=false ou asynchrone=true)
requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// syntaxe necessaire pour la methode post : il faut parametrer l'en-tete utilisé par la requete
requeteHttp.send('code ='+ escape(code));//...enfin on envoie la requete
traiterReponseparentb(requeteHttp.responseText);//appel de la fonction traiter réponse
}
}
}
else
{
document.getElementById("nomr").value ='';
document.getElementById("prenomr").value ='';
document.getElementById("adresser").value ='';
document.getElementById("cpr").value ='';
document.getElementById("viller").value ='';
document.getElementById("fixer").value ='';
document.getElementById("portr").value ='';
}
return;
}
function recevoirReponseparentb(requeteHttp)
// lorsque envoyerRequete se termine, le navigateur n'est pas figé. Donc, quand l'evenement onreadystatechange se produit, ie quand la propriété readystate=etat d'avancement de l'objet requeteHttp change de valeur (0=non initialisé, 1=en cours de chargement, 2=chargé, 3=interaction en cours, 4=requete terminée) , alors la fonction recevoir Reponse est appelée
{
//Quand la requete est terminée...
if (requeteHttp.readyState==4)
{
// on regarde le statut du deroulement de la requete ; la valeur 200 correspond a un bon deroulement, 404 a une page non trouvée...
if (requeteHttp.status==200)
{
traiterReponseparentb(requeteHttp.responseText);//appel de la fonction traiter réponse
}
else
{
alert("Erreur "+requeteHttp.status+" : la requête ne s'est pas correctement exécutée.");
}
}
}
function traiterReponseparentb(reponse)
//fonction qui traite la reponse de la requete
{
var i,nb, temp;
var saisie=reponse.split('*');//les resultats de la requete sont concaténés et separés par des * il est donc necessaire de deconcatener grace a la fonction split; celle-ci retourne un tableau de sous chaine de caractères en utilisant comme séparateur le motif qui suit.
nb=saisie.length; // on connait ainsi la longueur du tableau
for (i=0; i<nb; i++)
{
elt=saisie[i].split('*');
document.getElementById("nomr").value=elt[1];
document.getElementById("prenomr").value=elt[2];
document.getElementById("adresser").value=elt[3];
document.getElementById("cpr").value=elt[4];
document.getElementById("viller").value=elt[5];
document.getElementById("fixer").value=elt[6];
document.getElementById("portr").value=elt[7];
}
} |
Je suis désolé j'ai mis beaucoup de code mais ça me semble important pour une meilleur compréhension et pour facilité la correction.
Si quelqu'un pouvais m'aider je lui serait très reconnaissante ! :D
