Formulaire dynamique et base de données avec Ajax
Archive du forum. Créer des listes dynamiques selon une base de données.
Forum
09-05-2007 15:17:11
xspleen
bonjour,
j'essaye de faire une application web avec des listes qui ce charge en fonction d'un choix precedent. on m'a conseiller de le faire en ajax mais j'y connait rien donc j'ai chercher dans des tutoriels et j'ai trouvé une application ressemblant a ce que je cherche. J'ai essayer de l'executer chez moi mes j'ai plusieurs erreurs que je n'arrive pas a corriger donc si quelqu'un voulait bien m'aider ca serait sympa de ca part. merci.
//js
<?
include("animaux.php");
?>
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script language="javascript" type="text/javascript">
function test2(){
var l1 = f.elements["list1"];
var l2 = f.elements["list2"];
var index = l1.selectedIndex;
if(index < 1)
l2.options.length = 0;
else {
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest(); //on crée une instance de l'objet XMLHTTPRequest sous Firefox
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); //on crée une instance de l'objet XMLHTTPRequest sous IE ;
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", "animaux.php", true); //on spécifie la méthode de transmission des données, l'URL et le mode de transmission de la requête
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) // des que les données sont complètement accessibles
eval(xhr_object.responseText); //affiche le resultat de l'execution du fichier espece.php
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //la méthode est post dans ce cas on doit préciser l'encodage en spécifiant l'en-tête adéquat
var data = "famille="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
xhr_object.send(data); //on exécute la requête proprement dite
}
}
</script>
<STYLE TYPE="text/css">
td,select,input { font:normal 8pt Verdana }
.select1 {width:170px}
.select2 {width:80px}
</STYLE>
</head>
<body>
<div>
<form name="form_selects" id="form_selects" action="" method="POST" onsubmit="return test(this);">
<fieldset>
<legend>Faites un choix dans la liste de gauche<br />et observez le résultat dans celle de droite</legend>
<div >
Famille:
<select name="list1" id="list1" onchange="test2(this.form)">
<option value="" selected="selected"></option>
<option value="Canidés" >Canidés</option>
<option value="Félidés" >Félidés</option>
<option value="Équidés" >Équidés</option>
<option value="Bovidés" >Bovidés</option>
</select>
Espèces :
<select name="list2" id="list2" style="width:100px">
</select>
</div>
</fieldset>
</form>
</div>
</body>
</html>
//php
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
</head>
<body>
<?php
header('Content-type: text/html; charset=iso-8859-1'); //On précise le type des données qui vont être transférées depuis le serveur (ici, du texte utilisant le jeu de caractères iso-8859-1
$host="localhost";
$user="root";
$bdd="testespece";
$passwd="";
//connecxion a la base de données
$connexion=mysql_connect($host,$user,$passwd) or die("erreur de connexion au serveur\n".mysql_error());
$db=mysql_select_db($bdd,$connexion) or die("erreur de connexion a la base de donnees\n".mysql_error());
//requette
$query = "SELECT `espece` FROM `animaux` WHERE `famille` = '".$_POST["famille"]."'";
$query .= " ORDER BY `espece`";
$result = @mysql_query($query);
echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';
while($r = mysql_fetch_array($result))
echo 's.options[s.options.length] = new Option("'.$r["espece"].'");';
@mysql_close($mysql_db);
?>
</body>
</html>
//erreurs
Warning: Cannot modify header information - headers already sent by (output started at e:\stage access commerce\projet\test ajax\espece.php:9) in e:\stage access commerce\projet\test ajax\espece.php on line 10 Notice: Undefined index: famille in e:\stage access commerce\projet\test ajax\espece.php on line 22 var o = null; Notice: Undefined index: form in e:\stage access commerce\projet\test ajax\espece.php on line 27 Notice: Undefined index: select in e:\stage access commerce\projet\test ajax\espece.php on line 27 var s = document.forms[""].elements[""];s.options.length = 0;
15-05-2007 14:55:54
webmaster
Sans doute un vieux programme. Tout est dans le désordre. L'appel de open avant de définir le gestionnaire d'évènement par exemple.
En ce qui concerne le code PHP, on ne peut utiliser la fonction Header une fois que la page est créée, cette fonction ne marche que lorsque absolument rien n'a été affiché.
Je suggérerai d'essayer un autre programme.
28-07-2008 12:21:05
alkat
tu peux utiliser deux scripts pour résoudre ton problème: je te propose un exemple que j'ai personnellement trouver sur internet, je l'ai testé et il marche correctement:
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
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;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('auteur');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);
}
</script>
</head>
<body>
<center>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Auteurs</label>
<select name='auteur' id='auteur' onChange="go();">
<option value='-1'>Aucun</option>
<?php
mysql_connect("localhost","root","")or die("Non Connecté");
mysql_select_db("ajax")or die("Pas de Base des données");
$result = mysql_query("SELECT * FROM auteur") or die("connexion denied");
while($row=mysql_fetch_assoc($result))
{
echo"<option value='".$row['id']."'>".$row['nom']."</option>";
}
?>
</select>
<label>Livres</label>
<div id='livre' style='display:inline'>
<select name='livre'>
<option value='-1'>Choisir un auteur</option>
</select>
</div>
</fieldset>
</form></center>
</body>
</html>
<?php
mysql_connect("localhost","root","")or die("Non Connecté");
mysql_select_db("ajax")or die("Pas de connexion");
$sql = "SELECT * FROM auteur";
$result = mysql_query($sql) or die("erreur de connexion pour la requete");
echo "<select name='livre'>";
if(isset($_POST["idAuteur"])){
$res = mysql_query("SELECT id,titre FROM livre WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = mysql_fetch_array($res)){
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
}
}
echo "</select>";
?>
pour ce qui est de la structure de la base de données vous avez ceci
CREATE TABLE `auteur` ( `id` tinyint(4) NOT NULL auto_increment, `nom` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; -- -- Contenu de la table `auteur` -- INSERT INTO `auteur` (`id`, `nom`) VALUES (1, 'Clive Cussler'), (2, 'Harlan Coben'), (3, 'Franck Herbert'), (4, 'Pierre Bordages'); -- -------------------------------------------------------- -- -- Structure de la table `livre` -- CREATE TABLE `livre` ( `id` tinyint(4) NOT NULL auto_increment, `titre` varchar(50) NOT NULL, `idAuteur` tinyint(4) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ; -- -- Contenu de la table `livre` -- INSERT INTO `livre` (`id`, `titre`, `idAuteur`) VALUES (1, 'Odyssee', 1), (2, 'Sahara', 1), (3, 'Dragon', 1), (4, 'Une chance de trop', 2), (5, 'Ne le dis a personne', 2), (6, 'Disparu à jamais', 2), (7, 'Dune', 3), (8, 'La barriere de santaroga', 3), (9, 'Les guerriers du silence', 4), (10, 'La citadelle hyponeros', 4), (11, 'Terra mater', 4);
15-05-2007 15:05:04
webmaster
Il est entendu que ces scripts sont sous licence libre.
© 2008-2013 Xul.fr