Listes deroulantes liées

sisier · 5 Avril 2007

Hello tout le monde,

J'ai un petit problème avec une page.
Cette page en php contient :
- des listes déroulantes de noms prise dans une base de données Mysql
- des listes déroulantes de prénoms prise dans une base de données Mysql
- La liste des prenoms dépend du nom choisis

Cette page fonctionne.
Mais comme elle est faites en php. A chaque fois, que l'on choisit un nom, on est obligé de recharger la page entière pour avoir les prénoms correspondants.

J'ai cru voir qu'il fallait utiliser AJAX pour mettre à jour les lsites sans devoir recharger la page.
Je connais pas du tout le Javascript,quelqu'un pourrait t'il me guider un peu (me donner les étapes)?
Je dois d'abord essayé de mettre l'ensemble des nom et prenom dans un tableau ou alors, je peux travailler avec la bdd?

Merci d'avance pour votre aide.

KangOl · 5 Avril 2007

avoues que tu as pas essayer de demander a google avant

sisier · 6 Avril 2007

Ben si ... mais j'ai du mal à appréhender comment je peut travailler sur la BDD avec un langage coté client.
Et je ne veux pas faire des bêtes copié-collé à l'arrache pour faire un code dégoutant.

La je lis de la doc sur le java, si j'ai bien compris de toute façon .. il faudra que j'envoie toutes les données avec le php et que je les traite apres avec le Javascript?
C'est ça?

sisier · 6 Avril 2007

j'ai trouvé un bon tuto par hasard sur :

Vous devez être connecté pour voir les liens.

sisier · 6 Avril 2007

euuh problème.

j'ai essayé les scripts du tuto pour m'entrainer et j'ai une erreur :
"acces refusé".

une petite idée, O grand kangol? (ca fait pas trop léche cul comme ça :lol:

)

KangOl · 6 Avril 2007

quand ? avec quel navigateur ?
un bout de code ? (pas le temps de refaire le tuto)

sisier · 7 Avril 2007

Le problème vient sur IE.
J'ai pas testé avec Firefox.

Merci de ton aide

Code:

<html>
<script type="text/javascript">

function requete (f)
{
			var xhr_object = null;   
		   
		 if(window.XMLHttpRequest) // Firefox   
		 {
		    xhr_object = new XMLHttpRequest();   
}
		 else if(window.ActiveXObject) // Internet Explorer   
		 {
		    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");   
			}
		 else 
		 { // XMLHttpRequest non supporté par le navigateur   
		    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");   
		    
		 }   
		   
		 var method   = f.elements["method"][0].checked ? "GET" : "POST";   
		 var filename = "strings2.php";   
		 var s1       = f.elements["string1"].value;   
		 var s2       = f.elements["string2"].value;   
		 var data     = null;   
		   
		 if(s1 != "" && s2 != "")   
		 {
		    data = "s1="+s1+"&s2="+s2;   
}
		   
		 if(method == "GET" && data != null) 
		 {   
		    filename += "?"+data;   
		    data      = null;   
		 }   
		   
		 xhr_object.open(method, filename, true);   
		   
		 xhr_object.onreadystatechange = function() {   
		    if(xhr_object.readyState == 4) {   
		       var tmp = xhr_object.responseText.split(":");   
		       if(typeof(tmp[1]) != "undefined") {   
		          f.elements["string1_r"].value = tmp[1];   
		         f.elements["string2_r"].value = tmp[2];   
		       alert(tmp[0]);   
				}   
			}  
		}
		  
		 if(method == "POST")  
			{
			xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
		   }
		   
		 xhr_object.send(data);  

}		 

</script>
<body>
<div class="Centered">
	<form class="CenteredForm" name="form_strings2" id="form_strings2" action="" method="" onsubmit=";">
		<fieldset>
			<legend>Entrez deux chaînes et choisissez une méthode de transmission</legend>
			<div class="Left">
			Chaîne 1&nbsp;: <input type="text" name="string1" id="string1" size="10" /> -> <input type="text" name="string1_c" id="string1_r" size="10" disabled="disabled" /><br />
			Chaîne 2&nbsp;: <input type="text" name="string2" id="string2" size="10" /> -> <input type="text" name="string2_c" id="string2_r" size="10" disabled="disabled" /><br />
			Méthode&nbsp;: <input type="radio" name="method" id="method_get" value="GET" checked="checked" />get <input type="radio" name="method" id="method_post" value="POST" />post<br />
			</div>
		</fieldset>
		<input type="button" class="ButtonXL" value="Exécuter l'exemple" onclick="requete(this.form)" />
	</form>
</div>





</body>

<html>

strings2.php

Code:

header('Content-type: text/html; charset=iso-8859-1');   

<?php   
 if(count($_POST) > 0) {   
    echo "Données reçues en POST:";   
    foreach($_POST as $v)   
       echo strrev(utf8_decode($v)).":";   
 }   
 elseif(count($_GET) > 0) {   
    echo "Données reçues en GET:";   
    foreach($_GET as $v)   
       echo strrev($v).":";   
 }   
   
 if(count($_POST) == 0 && count($_GET) == 0)   
     echo 'Aucune donnée n\'a été reçue par "'.basename($_SERVER["PHP_SELF"]).'"...';  
?>

KangOl · 7 Avril 2007

et c'est qui qui te dit "accès refusé" ?

boub popsyteam · 7 Avril 2007

Sans rapport avec le pb,

quite a renvoyer un header, renvoie un charset correct

iso-8859-15 Sinon adieux les € et autres o-e-dans-l-o

sisier · 8 Avril 2007

et c'est qui qui te dit "accès refusé" ?

Ben quand je veux exécuter le script dans internet explorer. Il ne fait rien. Donc je vais voir les erreurs dans le navigateur.
Il me marque : "acces refusé".

Merci boubpopsyteam pour la précision :merci:

superted97 · 4 Juillet 2007

salut, dans cet exemple la partie ajax n'est pas bien définie,
exemple de scripts avec 2 listes déroulantes:

Vous devez être connecté pour voir les liens.

et tu peux télécharger le script

Listes deroulantes liées

sisier

KangOl

sisier

sisier

sisier

KangOl

sisier

KangOl

boub popsyteam

sisier

superted97