[AJAX] Echainement en cascade de script ajax

Version imprimable

Bonjour,

Je fais un enchainement de fonction ajax sur 3 niveaux. Le niveau 3 ne se déclenche pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p>
			<label for="table" title="Veuillez choisir un type de tiers dans la liste" class="oblig">*Type de tiers :</label>
			<select name="ad_type_tiers_id" id="ad_type_tiers_id" title="Veuillez choisir un type de tiers dans la liste" 
			onchange="go(document.getElementById('ad_id_tiers'),document.getElementById('ad_type_tiers_id'))"
			onfocus="this.className='focus';" onblur="this.className='normal';">
						<option value="-1">Aucun</option>
 
			</select>
			<span class="legende">ex : 'Famille'</span></p>
		</p>
		<p>
			<div id="ad_id_tiers">
			<label for="champ" title="Veuillez choisir un tiers dans la liste pour la famille du majeur">Tiers :</label>
						<select name="ad_id_tiers" id="ad_id_tiers" title="Veuillez choisir un tiers dans la liste pour la famille du majeur" 
						onchange="goFamilles(document.getElementById('ad_id_contact'),document.getElementById('ad_id_tiers'))"
						onfocus="this.className='focus';" onblur="this.className='normal';" >
 
						<option value="-1">Choisir un Type de tiers</option>
 
			</select>
			</div>
<p>
			<div id="ad_id_contact">
			<label for="champ" title="Veuillez choisir une personne dans la liste">Ayant Droit :</label>
						<select name="ad_id_contact" title="Veuillez choisir un nom dans la liste" 
						onfocus="this.className='focus';" onblur="this.className='normal';" >
 
							<option value="-1">Choisir un Tiers</option>
 
			</select>
			</div>
		</p>

L'enchainement se fait bien sur les id de départ et de réception entre le 1er "SELECT" et le second. Mais pour le 3ème "SELECT" en fait c'est dans le programme appelé par le script javascript au niveau du 2ème SELECT que je dois mettre l'id de départ et d'arrivée.

C'est ce que j'ai fait, mais cela ne fonctionne pas.

Est-il possible d'enchainer comme cela plusieurs script ajax, les uns découlant des autres en cascade ?

Merci d'avance

04/09/2006, 20h44
FremyCompany

1e chose : ton script ajax le supporte-t-il ? (Autrement dit, donne un bout de code sur ton appel AJAX ;))

Bonjour FREMY

J'ai 2 script, le premier pour la fonctions go et le second pour la fonction goFamilles dans 2 sources javascript différents

Voici le 1er

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//<!--Méthode qui sera appelée sur le click du bouton-->
			var _documentDiv=null; // le Div contenant l'emplacement de destination Attention, le nom du champ de destination et le nom du div sont identique
			var _idselect=null; // Id du select de départ
 
			function go (div,select){
			  _documentDiv=div;
			  _idselect=select;
 
				var xhr=GetXmlHttpRequest();
				//<!--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-->
					_documentDiv.innerHTML = leselect;
					}
				}
 
				//<!-- Ici on fait du post-->
				xhr.open("POST","../ajax/ajaxMajTiers.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 du div + la valeur du Select-->
				idfile = _idselect.options[_idselect.selectedIndex].value;
				xhr.send(_documentDiv.id+"="+idfile)
			}

Voici le 2ème

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//<!--Méthode qui sera appelée sur le click du bouton-->
			var _documentDiv=null; // le Div contenant l'emplacement de destination Attention, le nom du champ de destination et le nom du div sont identique
			var _idselect=null; // Id du select de départ
 
			function goFamilles (div,select){
			  _documentDiv=div;
			  _idselect=select;
 
				var xhr=GetXmlHttpRequest();
				//<!--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-->
					_documentDiv.innerHTML = leselect;
					}
				}
 
				//<!-- Ici on fait du post-->
				xhr.open("POST","../ajax/ajaxContactsFamilles.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 du div + la valeur du Select-->
				idfile = _idselect.options[_idselect.selectedIndex].value;
				xhr.send(_documentDiv.id+"="+idfile)
			}

Et pour mémoire le début de chacun de ces scripts :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
    // found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    if (!bFound)
        throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
    idList = null;
    return o2Store;
}
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest()
    }
    else if (window.ActiveXObject) {
        if (!GetXmlHttpRequest_AXO) {
            GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
        }
        return new ActiveXObject(GetXmlHttpRequest_AXO)
    }
    return false;
}

Donc effectivement, je sens que tu vas me dire que mon script ajax ne le supporte pas et qu'il faut un seul script pour réaliser l'enchainement.

Mais rien n'est moins sûr.

05/09/2006, 09h50
FremyCompany

Je ne vais rien te dire du tout : c'est mon script AJAX ;)

Petites correction :

Code:

xhr.send(escape(_documentDiv.id)+"="+escape(idfile))

Que vaut leselect avant le innerHTML ?
Que vaut le innerHTML avant, et après ?
Et si tu enlève la condition de status ?
--Elle pose parfois problème... remplace-la plutot par une condition qui verrifie que responseText n'est pas vide
Ou le script bloque-t-il exactement ?

Oui, oui bien sûr, il y a de cela quelques semaines en modifiant celui du tuto, nous avons eux quelques échanges.

Quelques modifications sur le code sur les "id"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<p>
			<label for="table" title="Veuillez choisir un type de tiers dans la liste" class="oblig">*Type de tiers :</label>
			<select name="ad_type_tiers_id" id="ad_type_tiers_id" title="Veuillez choisir un type de tiers dans la liste" 
			onchange="go(document.getElementById('tiers'),document.getElementById('ad_type_tiers_id'))"
			onfocus="this.className='focus';" onblur="this.className='normal';">
						<option value="-1">Aucun</option>
														<option value="9"
	  								  							>Adresse Majeur</option>
 
	  													<option value="32"
	  								  							>Ancien Tuteur</option>
	  													</option>
 
			</select>
			<span class="legende">ex : 'Famille'</span></p>
		</p>
		<p>
			<div id="tiers">
			<label for="champ" title="Veuillez choisir un tiers dans la liste pour la famille du majeur">Tiers :</label>
 
						<select name="ad_id_tiers" id="tiers_famille" title="Veuillez choisir un tiers dans la liste pour la famille du majeur" 
						onchange="goFamilles(document.getElementById('tiers_contact'),document.getElementById('tiers'))"
						onfocus="this.className='focus';" onblur="this.className='normal';" >
												<option value="120">Abed  69007 Lyon 07</option>
 
			</select>
			</div>
		</p>
		<p>
			<div id="tiers_contact">
			<label for="champ" title="Veuillez choisir une personne dans la liste">Ayant Droit :</label>
 
						<select name="ad_id_contact" title="Veuillez choisir un nom dans la liste" 
						onfocus="this.className='focus';" onblur="this.className='normal';" >
													<option value="0">   
							 							() </option>
 
			</select>
			</div>
		</p>

A l'écran
http://127.0.0.1/gestelle/images/test4.gif

Il ne se passe rien au niveau de l'ayant droit.

Effectivement je pense que comme il revient déjà d'un appel ajax, il ne connait pas les id.

La valeur de "leselect" dans le 1er script :
http://127.0.0.1/gestelle/images/test5.gif

Le innerHTML avant :

Le innerHTML après :

Je ne peux pas le tester avec "alert". Que dois-je utiliser pour connaître sa valeur.

J'ai remplacé ceci

Code:

1
2
3
4
5
6
if(xhr.readyState == 4 && xhr.status == 200)
					{
					leselect = xhr.responseText;
					//<!--On se sert de innerHTML pour rajouter les options a la liste-->
					_documentDiv.innerHTML = leselect;
					}

Par :

Code:

1
2
3
4
5
6
if(xhr.responseText != "")
					{
					leselect = xhr.responseText;
					//<!--On se sert de innerHTML pour rajouter les options a la liste-->
					_documentDiv.innerHTML = leselect;
					}

J'ai l'impression que le blocage est l'enchainement vers le 2ème script

J'ai mis un "alert" dans le 2ème script juste après "function goContacts" et le message ne s'affiche pas.

05/09/2006, 11h51
FremyCompany

Lol, les photos sont pas la ;)

Pour le test : if (xhr.readyState==4&&xhr.responseText!="") {}
05/09/2006, 12h26
lodan
Euh, je les vois bien les images lorsque je teste.

je les mets en pièces jointes

Pièce jointe 4443

Pièce jointe 4444

De plus, une réflexion qui m'est venu pendant la sieste pour un autre formulaire, ce script peut-il fonctionner si le champ de départ n'est pas dans un select, mais dans un input ?

Bien sûr, j'ai fait une modif comme ceci :
Code:

1 2 idVille = document.forms["maj"].elements["code_postal"].value xhr.send(escape(_documentDiv.id)+"="+escape(idVille))
Mais idVille contient bien la valeur recherchée, mais une fois dans mon programme php appelé, $_POST est vide ?
11/09/2006, 20h30
lodan

Je relance ce post, parceque je n'arrive toujours pas à enchainer à la suite :

Un choix dans un select qui déclenche un ajax qui contient un choix de select qui déclenche un ajax qui contient un choix de select.

Je n'arrive pas à construire l'enchainement.

J'ai pensé faire comme ceci

Formulaire A présentant les 3 selects. Les 2 derniers étant fictif puisqu'ils attendent la réponse du 1er

Choix dans le formulaire A qui déclenche un ajax avec un formulaire B qui présente les Select 2 et 3. Le 2 est alimenté, le 3 est fictif.

Choix dans le formulaire B qui déclenche un ajax avec un formulaire C qui présente le Select 3.

Est-ce un bon raisonnement ?