[AJAX] Lier deux listes déroulantes avec AJAX
beegees
Messages postés
102
Statut
Membre
-
beegees Messages postés 102 Statut Membre -
beegees Messages postés 102 Statut Membre -
Salut les développeurs,
J'aimerais créer une page avec 4 listes déroulantes liées.
J'ai une première liste déroulante qui s'alimente correctement, je ne pense pas que le code AJAX dans ma page n'est pas utile pour l'alimentation de ma liste déroulante, vous pouvez me confirmer cela svp ? :
[CODE]<?php
include('connexion.php');
$res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
//echo($res);
$query = mysql_query($res);
$nbrow = mysql_num_rows($query);
echo($nbrow);
?>
<script type='text/javascript'>
<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('Mnemonic').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('annee');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("ID="+ID);
}
</script>
<form>
<select name='annee' id='annee' onchange='go()'>
<option value='-1'>(1)Choisissez une année</option>
<?php
while($row = mysql_fetch_assoc($query)){
echo "<option value='".$row["NOM_ANNEE"]."'>".$row["NOM_ANNEE"]."</option>";
}
?>
</select>
</form>
/CODE
Je voudrais commencer par lier la première liste déroulante nommée "annee" avec la seconde liste déroulante qui est nommée "select_Nom_mnemonics" et donc voici le code pour l'AJAX :
[CODE]<?php
echo "<select name='select_Nom_mnemonics'>";
if(isset($_POST["ID"])){
mysql_connect("localhost","root","mdp");
mysql_select_db("deliberations");
$res = mysql_query("SELECT ID,NOM_ANNEE FROM annees
WHERE ID=".$_POST["ID"].");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["ID"]."'>".$row["ID"]."</option>";
}
}
echo "</select>";
?>/CODE
Ce que devrais afficher la liste déroulante "select_Nom_mnemonics" c'est le nom des cours par rapport à l'année choisie dans la liste déroulante "annee" et aussi dans lequel le Professeur donne cours (par rapport à son matricule).
Pour cela, j'ai cette requête qui pourrait être utilisée :
[CODE]$sql_Nom_Cours = "SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'"; /CODE
Je devrais donc travailler avec cette requête pour alimenter la seconde liste déroulante.
Sauriez-vous me dire comment je peux déjà lier ces deux listes déroulantes ?
Je vous en remercie d'avance.
beegees
J'aimerais créer une page avec 4 listes déroulantes liées.
J'ai une première liste déroulante qui s'alimente correctement, je ne pense pas que le code AJAX dans ma page n'est pas utile pour l'alimentation de ma liste déroulante, vous pouvez me confirmer cela svp ? :
[CODE]<?php
include('connexion.php');
$res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
//echo($res);
$query = mysql_query($res);
$nbrow = mysql_num_rows($query);
echo($nbrow);
?>
<script type='text/javascript'>
<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('Mnemonic').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('annee');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("ID="+ID);
}
</script>
<form>
<select name='annee' id='annee' onchange='go()'>
<option value='-1'>(1)Choisissez une année</option>
<?php
while($row = mysql_fetch_assoc($query)){
echo "<option value='".$row["NOM_ANNEE"]."'>".$row["NOM_ANNEE"]."</option>";
}
?>
</select>
</form>
/CODE
Je voudrais commencer par lier la première liste déroulante nommée "annee" avec la seconde liste déroulante qui est nommée "select_Nom_mnemonics" et donc voici le code pour l'AJAX :
[CODE]<?php
echo "<select name='select_Nom_mnemonics'>";
if(isset($_POST["ID"])){
mysql_connect("localhost","root","mdp");
mysql_select_db("deliberations");
$res = mysql_query("SELECT ID,NOM_ANNEE FROM annees
WHERE ID=".$_POST["ID"].");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["ID"]."'>".$row["ID"]."</option>";
}
}
echo "</select>";
?>/CODE
Ce que devrais afficher la liste déroulante "select_Nom_mnemonics" c'est le nom des cours par rapport à l'année choisie dans la liste déroulante "annee" et aussi dans lequel le Professeur donne cours (par rapport à son matricule).
Pour cela, j'ai cette requête qui pourrait être utilisée :
[CODE]$sql_Nom_Cours = "SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'"; /CODE
Je devrais donc travailler avec cette requête pour alimenter la seconde liste déroulante.
Sauriez-vous me dire comment je peux déjà lier ces deux listes déroulantes ?
Je vous en remercie d'avance.
beegees
A voir également:
- [AJAX] Lier deux listes déroulantes avec AJAX
- Listes déroulantes excel - Guide
- Listes déroulantes en cascade excel - Guide
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
2 réponses
ta partie formulaire:
la fonction Ajax go()
et le fichier rep_ajax_liste2.php (nomme le bien ainsi)
<form>
<select name="annee" id="annee" onchange="go('rep_ajax_liste2.php','annee','liste_Nom_mnemonics')">
<option value='-1'>(1)Choisissez une année</option>
<?php
while($row = mysql_fetch_assoc($query)){
echo "<option value="".$row['NOM_ANNEE']."">".$row['NOM_ANNEE']."</option>";
}
?>
</select>
<div id="liste_Nom_mnemonics">
<!-- la sera chargee la deuxieme liste par Ajax -->
</div>
</form>
la fonction Ajax go()
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(url,id_lire,id_ecrire){
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
//je t'ai modifie la ligne ci dessous
document.getElementById(id_ecrire).innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST",url,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
//tu a pompé ce script sans l'adapter à ton cas
//je t'ai modifié les lignes ci dessous
obj = document.getElementById(id_lire);
data = "sel="+obj.value;
xhr.send(data);
}
et le fichier rep_ajax_liste2.php (nomme le bien ainsi)
<?php
echo "<select name='select_Nom_mnemonics'>";
if(isset($_POST['sel'])){
mysql_connect("localhost","root","mdp");
mysql_select_db("deliberations");
$res = mysql_query("SELECT * FROM annees
WHERE NOM_ANNEE='".$_POST['sel']."'");
while($row = mysql_fetch_assoc($res)){
//ci dessous je pense que tu dois modifier les noms des champs a afficher pour avoir les Nom_mnemonics
echo "<option value="".$row['ID']."">".$row['ID']."</option>";
}
}
echo "</select>";
?>