Ajax: Interactivité entre listes déroulantes
shazdo
Messages postés
17
Statut
Membre
-
shazdo Messages postés 17 Statut Membre -
shazdo Messages postés 17 Statut Membre -
Bonjour à vous tous!
J'ai un problème qui ne me semble pas avoir été posé.
J'ai bien suivi le tuto de "siddh", et j'arrive à manier à peu près l'objet XMLHTTPrequest.
Cependant, j'aimerai ajouter une fonctionnalité, à savoir, rendre mes listes inter-dynamiques. Je m'explique: quand on choisi un "livre", la liste des "titres" apparait. Ok. J'ai ajouté le code nécessaire de manière à ce que l'inverse fonctionne aussi. Jusqu'ici tout va bien.
Mon problème est qu'une fois qu'un objet HTTPrequest est initialisé, l'autre semble impossible à démarrer, et ce, dans n'importe quel sens. 8O
J'ai volontairement mis une ligne "choisissez votre ...." (value=-1) en début de toutes les listes, afin de pouvoir revenir à l'état initial de chargement, et pourvoir choisir dans l'autre sens. (enfin, c'est dans le code)
Le code javascript est quasiment identique à celui de "siddh".
Le code PHP est très simple, et le formulaire tout autant.
Je débute en Ajax, mais suis insistant, et j'ai passé pas mal de temps à trifouiller avant de venir vous embêter.
Pourriez vous m'aider?
J'ai un problème qui ne me semble pas avoir été posé.
J'ai bien suivi le tuto de "siddh", et j'arrive à manier à peu près l'objet XMLHTTPrequest.
Cependant, j'aimerai ajouter une fonctionnalité, à savoir, rendre mes listes inter-dynamiques. Je m'explique: quand on choisi un "livre", la liste des "titres" apparait. Ok. J'ai ajouté le code nécessaire de manière à ce que l'inverse fonctionne aussi. Jusqu'ici tout va bien.
Mon problème est qu'une fois qu'un objet HTTPrequest est initialisé, l'autre semble impossible à démarrer, et ce, dans n'importe quel sens. 8O
J'ai volontairement mis une ligne "choisissez votre ...." (value=-1) en début de toutes les listes, afin de pouvoir revenir à l'état initial de chargement, et pourvoir choisir dans l'autre sens. (enfin, c'est dans le code)
Le code javascript est quasiment identique à celui de "siddh".
Le code PHP est très simple, et le formulaire tout autant.
Formulaire: [CODE]
<?php
mysql_query("SET NAMES UTF8");
echo "<form><fieldset style='width: 500px'><legend>Liste liées</legend>";
echo "<label>Auteurs </label>";
echo "<div name='divAuteur' id='divAuteur' style='display:inline'>";
echo "<select name='auteur' id='auteur' onchange='goAuteur()' class='dyn'>";
echo "<option value='-1' SELECTED>Choissir un auteur</option>";
$sql = mysql_query("SELECT * FROM auteur ORDER BY nom");
while($row = mysql_fetch_assoc($sql))
{ echo "<option value='".$row["id"]."'>".$row["nom"]."</option>"; }
echo "</select> </div>";
echo "<label> Livres </label>";
echo "<div name='divLivre' id='divLivre' style='display:inline'>";
echo "<select name='livre' id='livre' onchange='goLivre()' class='dyn'>";
echo "<option value='-1' SELECTED>Choisir un titre</option>";
$sql = mysql_query("SELECT * FROM livre ORDER BY titre");
while($row = mysql_fetch_assoc($sql))
{ echo "<option value='".$row["idAuteur"]."'>".$row["titre"]."</option>"; }
echo "</select></div>";
echo "</fieldset></form>";
?>
/CODE
Ajax.php: [CODE]
<?php
include('../lib/connect.php');
mysql_query("SET NAMES UTF8");
if (isset($_POST["idAuteur"]))
{
echo "<select name='livre' class='dyn' onClick='goLivre()>";
if ($_POST["idAuteur"]==-1)
{
$sql = mysql_query("SELECT * FROM livre ORDER BY titre");
echo "<option value='-1'>Choisir un titre</option>";
}
else { $sql = mysql_query("SELECT * FROM livre
WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre"); }
echo "<option value='-1'>Choisir un titre</option>";
$i=0; // pour savoir si un auteur à été sélectionné
while($row = mysql_fetch_assoc($sql))
{
echo "<option value='".$row["idAuteur"]."'>".$row["titre"]."</option>";
$i++;
}
if ($i==0) { echo" <option value='-1'>Aucun résultats</option>" ;}
echo "</select>";
}
else if (isset($_POST["idLivre"]))
{
echo "<select name='auteur' class='dyn' onClick='goAuteur()>";
if ($_POST["idLivre"]==-1)
{
$sql = mysql_query("SELECT * FROM auteur ORDER BY nom");
echo "<option value='-1'>Choisir un auteur</option>";
}
else { $sql = mysql_query("SELECT * FROM auteur
WHERE id=".$_POST["idLivre"]." ORDER BY nom"); }
echo "<option value='-1'>Choisir un titre</option>";
$i=0; // pour savoir si un auteur à été sélectionné
while($row = mysql_fetch_assoc($sql))
{
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
$i++;
}
if ($i==0) { echo" <option value='-1'>Aucun résultats</option>" ;}
echo "</select>";
}
?>
/CODE
Javascript: [CODE]
<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 auteur */
function goAuteur(){
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('divLivre').innerHTML = leselect;
}
}
// Ici on envoi la requete en post
xhr.open("POST","ajax.php",true);
// ne pas oublier le header pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// enfin, on post les arguments, ici l'id de l'auteur
sel = document.getElementById('auteur');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);
}
/* Méthode qui sera appelée sur le click du bouton livre */
function goLivre(){
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
leselect2 = xhr.responseText;
document.getElementById('divAuteur').innerHTML = leselect2;
}
}
xhr.open("POST","ajax.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel2 = document.getElementById('livre');
idlivre = sel2.options[sel2.selectedIndex].value;
xhr.send("idLivre="+idlivre);
}
</script>
/CODE
Je débute en Ajax, mais suis insistant, et j'ai passé pas mal de temps à trifouiller avant de venir vous embêter.
Pourriez vous m'aider?
Configuration: Windows 2000 Firefox 2.0.0.13
A voir également:
- Ajax: Interactivité entre listes déroulantes
- Code ajax - Forum Javascript
- Yggtorrent erreur ajax ✓ - Forum PHP
- Erreur ajax c'est quoi - Forum Webmastering
- Erreur ajax ✓ - Forum Javascript
- Une Erreur HTTP AJAX s'est terminée anormalement - Forum Webmastering
1 réponse
Bon, j'ai réussi à me dépatouiller,
il y a avait plusieurs problèmes.
Si vous voulez voir des listes déroulantes dynamiques, allez ici http://www.monfl.fr/exemples/divers/httprequest.php.
Si vous voulez voir des exemples d'auto complétion, allez ici http://www.monfl.fr/exemples/autocompletion.php.
Si vous voulez de l'aide ou des conseils, n'hésitez pas à poster ici http://www.monfl.fr/forumDI.
Ce forum est naissant mais nous sommes présents et vous répondrons avec plaisir, dans la mesure de nos connaissances.
Bonne journée à vous tous!
il y a avait plusieurs problèmes.
Si vous voulez voir des listes déroulantes dynamiques, allez ici http://www.monfl.fr/exemples/divers/httprequest.php.
Si vous voulez voir des exemples d'auto complétion, allez ici http://www.monfl.fr/exemples/autocompletion.php.
Si vous voulez de l'aide ou des conseils, n'hésitez pas à poster ici http://www.monfl.fr/forumDI.
Ce forum est naissant mais nous sommes présents et vous répondrons avec plaisir, dans la mesure de nos connaissances.
Bonne journée à vous tous!