Deux listes liées en ajax
kawther84
Messages postés
348
Statut
Membre
-
ShuGun -
ShuGun -
bonjour
je veux avoir deux listes qui sont liées.selon ce qui est selectionné dans la première liste je change le continue de la deuxième.
ma base de données est la suivante:
et j'ai le fichier auteurs.php qui contient les deux listes:
et le script ajaxLivre.php suivant:
je sais pas pourquoi j'obtient pas de résultat avec ce script.
SVP j'ai besoin de votre aide.
d'avance merci.
je veux avoir deux listes qui sont liées.selon ce qui est selectionné dans la première liste je change le continue de la deuxième.
ma base de données est la suivante:
CREATE TABLE `auteur` ( `id` tinyint(4) NOT NULL auto_increment, `nom` varchar(50) NOT NULL, PRIMARY KEY (`id`) ); insert into `auteur` values (1,'Clive Cussler'), (2,'Harlan Coben'), (3,'Franck Herbert'), (4,'Pierre Bordages'); CREATE TABLE `livre` ( `id` tinyint(4) NOT NULL auto_increment, `titre` varchar(50) NOT NULL, `idAuteur` tinyint(4) default NULL, PRIMARY KEY (`id`) ) ; insert into `livre` 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);
et j'ai le fichier auteurs.php qui contient les deux listes:
<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>
<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>
<?
mysql_connect('localhost','root','root');
mysql_select_db('test');
$res = mysql_query("SELECT * FROM auteur ORDER BY
nom");
while($row = mysql_fetch_array($res)){
$id=$row['id'];
$nom=$row['nom'];
echo "<option
value='$id'>'$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>
</body>
</html>
et le script ajaxLivre.php suivant:
<?php
echo "<select name='livre'>";
if(isset($_POST["idAuteur"])){
mysql_connect("localhost","root","root");
mysql_select_db("test");
$res = mysql_query("SELECT id,titre FROM livre
WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
}
}
echo "</select>";
?>
je sais pas pourquoi j'obtient pas de résultat avec ce script.
SVP j'ai besoin de votre aide.
d'avance merci.
A voir également:
- Deux listes liées en ajax
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
- Liste déroulante en cascade - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
4 réponses
Salut,
en fait dans ton script, c'est la partie qui traite du ajax qui te fait défaut, il manque les parametres qui définissent ou le résultat sera retourné.
tu peux un exemple à l'adresse suivante : http://www.roodali.com/index.php?2007/07/03/9-2-listes-deroulantes-liees-avec-ajax-mysql-php
et tu aussi télécharger les scripts.
en fait dans ton script, c'est la partie qui traite du ajax qui te fait défaut, il manque les parametres qui définissent ou le résultat sera retourné.
tu peux un exemple à l'adresse suivante : http://www.roodali.com/index.php?2007/07/03/9-2-listes-deroulantes-liees-avec-ajax-mysql-php
et tu aussi télécharger les scripts.
J'ai eu le meme soucis en recopiant exactement le code de SIDDH sur developpez.com. Impossible de le faire marcher, la deuxième liste reste vide.
Par contre en téléchargeant l'archive zip contenant toutes les sources de l'article de SIDDH, ca marche (le code est par endroit différent que celui du tutoriel).
Il faudra juste mettre en commentaire "alert(xhr.readyState);" dans auteurs.php pour éviter les alertes, et ca marche très bien (pour moi en tout cas sous WAMP).
Par contre en téléchargeant l'archive zip contenant toutes les sources de l'article de SIDDH, ca marche (le code est par endroit différent que celui du tutoriel).
Il faudra juste mettre en commentaire "alert(xhr.readyState);" dans auteurs.php pour éviter les alertes, et ca marche très bien (pour moi en tout cas sous WAMP).
