Afficher depuis d'une liste deroulante (PHP+AJAX)

22 févr. 2006, 12:42

Bonjour,

bah voilà je suis en cour de developpement d'une ptit application mais là je suis bloqué ... je DOIS utilisé la methode AJAX PHP.

d'abord le contenue du 2eme liste deroulante se charge apartir du choix de la 1ere, et la 3eme apartir de la 2eme, j'ai pu faire la 1ere etape ce qui veux dire chargée la 2eme liste deroulante apartir du choix de la 1ere liste deroulante, mais j'arrive pas a ajouter la 3eme :s

et mon 2eme problem c'est apres que l'utilisateur choisi une option dans la 3eme liste deroulante les information complementaire doivent s'afficher au dessous , dans la meme pages, sans la recharger (avec ajax).

je me suis servi des exemple pour le chargement des liste deroulante d'un tutoriel que sadeq a proposé (ici sur le forum) ... mais là j'arrive plus a continué...

PS: je suis encore debutant en javascript et php ...

Merci d'avance pour votre aide

23 févr. 2006, 12:31

est ce que mon probleme est si difficile que personne n'a pu repondre

vraiment ça fé 3jours maintenant que j'essaye et j'arrive pas ....

23 févr. 2006, 12:34

As-tu vu l'autre tuto sur les listes dynamiques liées via AJAX proposé dans la FAQ par Xenon_54 ?

23 févr. 2006, 12:47

oui, mais le problem c'est que j'ai pa pu ajouter une 3eme liste deroulante attaché avec la 2eme ...

PS: mon projet consiste a utilise ajax meme si on a pa eu une formation ni en javascript ni en xml, c'est pour ça que j'arrive difficilement a faire un truc

23 févr. 2006, 12:49

Alors essaye d'identifier les parties de code à problème et indique les ici qu'on ait une chance de voir où pourrait se trouver le problème. Sans voir de code, on ne peut pas deviner.

23 févr. 2006, 14:28

j'ai pas pu ajouter aucune ligne de code d'apres le tutoriel

25 févr. 2006, 20:42

Salut,

Tu peux déja placer des listes dans 3 divs distinctes !
ils te serviront pour indiquer à l'Ajax mettre les 3 listes.

La page HTML :

Code : Tout sélectionner

<!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">
<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
	<title></title>

<script type="text/javascript">
<!--

if(!document.getElementById){
  if(document.all)
  document.getElementById=function(){
	if(typeof document.all[arguments[0]]!="undefined")
	return document.all[arguments[0]]
	else
	return null
  }
  else if(document.layers)
  document.getElementById=function(){
	if(typeof document[arguments[0]]!="undefined")
	return document[arguments[0]]
	else
	return null
  }
}

function AjaxUrl(urlFichier, divRetour, actionAjax) {
	//--> CREATION DE L'OBJET AJAX
	document.getElementById(divRetour).innerHTML = "<p>Traitement en cours...</p>";
	if(window.XMLHttpRequest)
	   objetAjax = new XMLHttpRequest();
	else if(window.ActiveXObject)
	   objetAjax = new ActiveXObject("Microsoft.XMLHTTP");
	else {
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   return;
	}
	
	//--> ENVOI DE LA REQUETE
	objetAjax.open("GET", urlFichier, true);
	objetAjax.send(null);
	
	//--> TRAITEMENT DU RESULTAT
	objetAjax.onreadystatechange = function () {
		if (objetAjax.readyState == 4) {
			if (actionAjax == "HTML") {
				document.getElementById(divRetour).innerHTML = objetAjax.responseText;
			}
			else {
				eval(objetAjax.responseText);
			}
		}
	}
}

//-->
</script>

</head>
<body>
<div id="liste1">
<select name="maListe1" onchange="urlAjax('genererliste2.php?clauseWhere=this.value', 'liste2', 'HTML')">
	<option value="lavaleur">Intitule</option>
	...
	...
	...
</select>
</div>

<div id="liste2">
<p>veuillez choisir un element de la liste 1</p>
</div>

<div id="liste3">
<p>veuillez choisir un element de la liste 2</p>
</div>

</body>
</html>

La page qui genere la liste 2 :

<?php

/* CONNEXION A LA BDD ET DIVERS */

$requete = mysql_query("SELECT id, champ FROM table WHERE clauseRecherche = '".$_GET['clauseWhere']."'");
echo "<select name=\"maListe2\" onchange=\"urlAjax('genererliste3.php?clauseWhere=this.value', 'liste3', 'HTML')\">";

while ($res = mysql_fetch_assoc($requete)) {
	echo "<option value=\"".$res['id']."\">".$res['champ']."</option>";
}
echo "</select>";

/* LA LISTE 2 EST GENEREE */

/* ON SUPPRIME LA LISTE 3 SI ELLE A DEJA ETE GENEREE */

?>
<script type="text/javascript">
<!--
document.getElementById("liste3").innerHTML = "<p>Veuillez choisir un element de la liste 2</p>";
//-->
</script>

et celle qui genere la 3eme liste

<?php

/* CONNEXION A LA BDD ET DIVERS */

$requete = mysql_query("SELECT id, champ FROM table WHERE clauseRecherche = '".$_GET['clauseWhere']."'");
echo "<select name=\"maListe3\" >";

while ($res = mysql_fetch_assoc($requete)) {
	echo "<option value=\"".$res['id']."\">".$res['champ']."</option>";
}
echo "</select>";

/* LA LISTE 3 EST GENEREE */

echo "Infos complémentaires ICI !";
?>

c'est rapide et pas très optimisé mais c'est pour le principe.

Si tu veux plus d'infos sur l'utilisation de l'ajax jette un oeil ici : http://www.toutajax.info/doku.php

27 févr. 2006, 12:09

j'ai beau essayer de modifier vos pages pour qu'il s'adapte a mon besoin mais j'ai pas pu arriver a un bon resultat j'ai toujours un probléme Javascript: Erreur : Objet Inatendu

voilà mes pages:
index.php:

Code : Tout sélectionner

<!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"> 
<head> 
   <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> 
   <title></title> 

<script type="text/javascript"> 
<!-- 

if(!document.getElementById){ 
  if(document.all) 
  document.getElementById=function(){ 
   if(typeof document.all[arguments[0]]!="undefined") 
   return document.all[arguments[0]] 
   else 
   return null 
  } 
  else if(document.layers) 
  document.getElementById=function(){ 
   if(typeof document[arguments[0]]!="undefined") 
   return document[arguments[0]] 
   else 
   return null 
  } 
} 

function AjaxUrl(urlFichier, divRetour, actionAjax) { 
   //--> CREATION DE L'OBJET AJAX 
   document.getElementById(divRetour).innerHTML = "<p>Traitement en cours...</p>"; 
   if(window.XMLHttpRequest) 
      objetAjax = new XMLHttpRequest(); 
   else if(window.ActiveXObject) 
      objetAjax = new ActiveXObject("Microsoft.XMLHTTP"); 
   else { 
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
      return; 
   } 
    
   //--> ENVOI DE LA REQUETE 
   objetAjax.open("GET", urlFichier, true); 
   objetAjax.send(null); 
    
   //--> TRAITEMENT DU RESULTAT 
   objetAjax.onreadystatechange = function () { 
      if (objetAjax.readyState == 4) { 
         if (actionAjax == "HTML") { 
            document.getElementById(divRetour).innerHTML = objetAjax.responseText; 
         } 
         else { 
            eval(objetAjax.responseText); 
         } 
      } 
   } 
} 

//--> 
</script> 

</head> 
<body> 
<div id="liste1"> 
<?php  
$host = "localhost";
$database = "essai";
$user = "root";
$password = "";
$ajax = mysql_pconnect($host, $user, $password) or die(mysql_error());
$db= mysql_select_db($database);
/* CONNEXION A LA BDD ET DIVERS */
$sql = 'SELECT id_region, region FROM region'; 
 
 ?> 
<select name="maListe1" onchange="urlAjax('genererliste2.php?region=this.value', 'liste2', 'HTML')"> 
<?    if (FALSE !== ($res = mysql_query($sql, $ajax))) { 

        while ($row = mysql_fetch_assoc($res)) { 
            printf('<option value="%s">%s</option>', $row['id_region'],  $row['region']); 
        } 
        mysql_free_result($res); 
    } 
?>
</select> 
</div> 

<div id="liste2"> 
<p>veuillez choisir un element de la liste 1</p> 
</div> 

<div id="liste3"> 
<p>veuillez choisir un element de la liste 2</p> 
</div> 

</body> 
</html>

genererliste2.php:

Code : Tout sélectionner

<?php 
$host = "localhost";
$database = "essai";
$user = "root";
$password = "";
$ajax = mysql_pconnect($host, $user, $password) or die(mysql_error());
$db= mysql_select_db($database);
/* CONNEXION A LA BDD ET DIVERS */ 

$requete = mysql_query("SELECT * FROM departement WHERE id_region = '".$_GET['region']."'"); 
echo "<select name=\"maListe2\" onchange=\"urlAjax('genererliste3.php?departement=this.value', 'liste3', 'HTML')\">"; 

while ($res = mysql_fetch_assoc($requete)) { 
    echo "<option value=\"".$res['id_departement']."\">".$res['departement']."</option>"; 
} 
echo "</select>"; 

/* LA LISTE 2 EST GENEREE */ 

/* ON SUPPRIME LA LISTE 3 SI ELLE A DEJA ETE GENEREE */ 

?> 
<script type="text/javascript"> 
<!-- 
document.getElementById("liste3").innerHTML = "<p>Veuillez choisir un element de la liste 2</p>"; 
//--> 
</script>

genererliste3.php:

Code : Tout sélectionner

<?php 
$host = "localhost";
$database = "essai";
$user = "root";
$password = "";
$ajax = mysql_pconnect($host, $user, $password) or die(mysql_error());
$db= mysql_select_db($database);

/* CONNEXION A LA BDD ET DIVERS */ 

$requete = mysql_query("SELECT * FROM quartier WHERE id_departement = '".$_GET['departement']."'"); 
echo "<select name=\"maListe3\" >"; 

while ($res = mysql_fetch_assoc($requete)) { 
    echo "<option value=\"".$res['id_quartier']."\">".$res['quartier']."</option>"; 
} 
echo "</select>"; 

/* LA LISTE 3 EST GENEREE */ 

echo "Infos complémentaires ICI !"; 
?>

Merci

27 févr. 2006, 13:24

c'est bon merci j'ai pu ajouter une 3eme liste lié avec la 2eme ...... mais j'ai encore une toute ptite question

si par exemple je veux que quand je choisi une option dans ma 3eme liste, les autre champs de la base de donnée s'affiche en bas dans la meme pages, sans que je met un bouton directement ... comment ferai-je ?

27 févr. 2006, 14:01

Problemes Resolut...

Je pris les moderateurs de mettre "Résolu" pret du sujet

Afficher depuis d'une liste deroulante (PHP+AJAX)

Qui est en ligne