deux onchange dans un selectRésolu

Question

Bonjour!

j'essaie d'appliquer deux actions dans une liste déroulante à savoir j'ai une liste déroulante qui affiche en fonction de ce qui est choisi deux autres listes. 
Si quelqu'un pouvait me dire ce qui ne vas pas dans mon code et me guider je lui en serais reconnaissante.

voici mon code javascript : 
var Ld1Id='';
var Ld2Id='';
var id_liste='';

function ValideLd2(val) {
Ld1Id=val; 
id_liste='2';//Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
ObjetXHR(LD_URL)
// Réinitialisation de Ld3 et Ld4 si modification de LD1 après passage en Ld2
if (Ld2Id!='') {ValideLd3(''); ValideLd4('')}
}


function ValideLd3(val) {
Ld2Id=val;
id_liste='3';//Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
if (Ld2Id=='') {var LD_URL = 'ValideLd3.php';}	
ObjetXHR(LD_URL)
}	

function ValideLd4(val) {
Ld2Id=val; 
id_liste='4'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd4.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
if (Ld2Id=='') {var LD_URL = 'ValideLd4.php';}	
ObjetXHR(LD_URL)
}

function ValideLd(val){

ValideLd3(val);
ValideLd4(val);}


function ObjetXHR(LD_URL) {
//creation de l'objet XMLHttpRequest
if (window.XMLHttpRequest) { // Mozilla,...
xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}	
xmlhttp.onreadystatechange=ChargeLd;
xmlhttp.open("POST", LD_URL, true);
xmlhttp.send(null);
} else if (window.ActiveXObject) { //IE 
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
if (xmlhttp) {
xmlhttp.onreadystatechange=ChargeLd;
xmlhttp.open('POST', LD_URL, false);
xmlhttp.send();
}
}
// Bouton non apparent car modification de LD1 ou Ld2
document.getElementById('buttons').style.display='none';
}

// fonction pour manipuler l'appel asynchrone
function ChargeLd() {
if (xmlhttp.readyState==4) { 
if (xmlhttp.status==200) { 
//span id="niv2" ou "niv3" ou "niv4"
document.getElementById('niv'+id_liste).innerHTML=xmlhttp.responseText; 
if (xmlhttp.responseText.indexOf('disabled')<=0) {
//focus sur liste déroulante 2 ou 3 ou 4
document.getElementById('Liste'+id_liste).focus(); 
}	
}
}
}

function Affiche_Btn() {
document.getElementById('buttons').style.display='inline';
}

Dans la page html j'ai :

<select class="Liste2" name="Liste2" id="Liste2" onchange="ValideLd(this[this.selectedIndex].value);">

merci!

Bul3 · Accepted Answer

euh... je pensais avoir tout dit...
je vais tenter de réexpliquer ?

vous faites :
function ValideLd(val)
{    ValideLd3(val);
     ValideLd4(val);
}


ValideLd3(val); va appeller xmlhttprequest
( dans la fonction ObjetXHR )
et, immédiatement, sans attendre le retour
du serveur, vous lancez ValideLd4(val);
qui donc appelle lui aussi ObjetXHR,
donc ça queute

avant de lancer une nouvelle requête ajax
il faut attendre le retour de la précédente
le retour d'ajax c'est donné dans
xmlhttp.onreadystatechange , 
quand xmlhttp.readyState==4

Bul3 · Answer

Bonjour,

vous appelez 2 fois xmlhttprequest 
et pour le 2ème sans attendre le retour 
du 1er. ça ne peut pas fonctionner.

lancez ajax pour le 1er et
lorsque xmlhttp.onreadystatechange est déclanché,
quand xmlhttp.readyState==4
vous pourrez relancer le 2ème

Cordialement	[mon Site]	[M'écrire]	Bul

laticocotte · Answer

Merci pour votre réponse!

Pouvez-vous m'expliquer plus en détails je ne vois pas exactement ce que vous voulez dire au niveau de mon code?

désolée je suis novice.
Merci

laticocotte · Answer

Vous avez raison!
Merci pour l'explication. Je vais corriger ca.

laticocotte · Answer

j'ai procédé autrement et fait ainsi :

var Ld1Id='';
var Ld2Id='';
var Ld3Id='';
var id_liste='';

function ValideLd2(val) {
Ld1Id=val; //id_département
id_liste='2';//Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
ObjetXHR(LD_URL)
// Réinitialisation de Ld3 si modification de LD1 après passage en Ld2
if (Ld2Id!='') {ValideLd3('');}
}

function ValideLd3(val) {
Ld2Id=val; //id_commune
id_liste='3'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
if (Ld3Id='') {ValideLd4('');}	
ObjetXHR(LD_URL)
}

function ValideLd4(val) {
Ld3Id=val; 
id_liste='4'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd4.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id+'&Ld3='+Ld3Id;
if (Ld3Id=='') {var LD_URL = 'ValideLd4.php';}
ObjetXHR(LD_URL)
}


avec :

<select class="Liste2" name="Liste2" id="Liste2" onchange="ValideLd3(this[this.selectedIndex].value);ValideLd4(this[this.selectedIndex].value);">

Ca affiche bien ma liste 3 mais pas ma liste 4.

Bul3 · Answer

si ça affiche la liste 3 c'est "un hasard",
un résultat ponctuel, qui queutera un jour
ou l'autre.
vous n'attendez toujours pas la réponse
de l'ajax appelé par ValideLd3 avant de 
lancer celui de ValideLd4

Deux onchange dans un select

6 réponses

Votre réponse

Discussions similaires