Discussion :

[tosprou]

Bonjour, après avoir cherché si mon bug n'avait pas déjà été résolu sur le fofo comme sur l'ami google, je post.
Mon problème est le suivant:
J'ai 4 listes dans un formulaire HTML.
Appelons les categories1, produits1, categories2 et produits2 pour faire simple.
Je veux que mon script fasse comme suit:
Quand je clique sur une catégorie, la liste de produits correspondants n'affiche plus que les produits de la catégorie sélectionnée.
J'ai pris le script du tutoriel AJAX, qui fonctionne très bien lorsque je n'ai qu'un couple de listes "catégories/produits".
J'ai donc essayé ceci pour lier les 4 listes 2 à 2:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<script type='text/javascript'>
var xhr = null; 
 
function getXhr()
{
	if(window.XMLHttpRequest)
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject)
	{
		try 
		{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) 
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else 
	{
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
}
 
function go()
{
	getXhr();
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			leselect = xhr.responseText;
			document.getElementById('idclient').innerHTML = leselect;
		}
	}
	xhr.open("POST","../tri_client.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('idsegment');
	idsegment = sel.options[sel.selectedIndex].text;
	xhr.send("idSegment="+idsegment);
}
 
function rego()
{
	getXhr();
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			leselect = xhr.responseText;
			document.getElementById('idprofondeur').innerHTML = leselect;
		}
	}
	xhr.open("POST","tri_profondeur.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('iddate');
	iddate = sel.options[sel.selectedIndex].text;
	xhr.send("idDate="iddate);
}
</script>

Mais, comme vous vous en doutez, ca ne marche pas.
Je me suis dit en premier lieu que c'étaient les 2 appels à xhr.onreadystatechange = function() qui faisaient planter la bete, mais ce n'est pas le cas.
Je me suis aussi dit que j'avais des problèmes avec mes accolades ou mes point-virgules, mais ce n'est pas le cas non plus.
Si j'enlève la fonction go2(), le premier couple de listes liées fonctionne, et j'ai aussi essayé de renommer go2() en rego(), mais ca ne marche pas non plus.
Ah au fait, le bug est le suivant : Quand j'essaie ce script, et que je clique sur une des 2 "catégories", rien ne se passe.

Bien a vous, et merci d'avance.

Petit ajout:
Je me suis dit que le problème pouvait venir de l'interprétation des chemins que fait javascript (mes 2 scripts php appelés ne sont pas dans le meme dossier), j'ai testé, apparemment le problème n'est pas là non plus.

[siddh]

t as pas une erreur javascript ?

[siddh]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.send("idDate="+iddate);

[tosprou]

RAAAH!!!
Tout ca parceque j'avais enlevé ce [moulte insultes] de +!!!!!!
Et ca fait 4 heures que j'me prends la tete avec ca!
Bon sur ce je prends +1 dans ma carac "boulet", je mets le tag résolu, et je retourne au boulot...

Ah au fait:
Oui Siddh, j'avais un eerreur javascript, sans moyen de débugger, et merci, j'ai corrigé et ca marche

[siddh]

fais tes tests dans firefox avec firebug, tu auras un debugger comme ça

[vincent_plume]

Bonjour siddh,

Merci pour ton super script
il fonctionne parfaitement pour 2 listes dépendantes
Mais pour 3 listes dépendantes, j'y arrive pas

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 go1(){
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('souscat').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","souscat.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('mixcom');
IdCat = sel.options[sel.selectedIndex].value;
// IdCat appartient à la table sous catégorie (table niveau inférieur table sous categorie et non mixcom)
xhr.send("IdCat="+IdCat);
}
function go2(){
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('types').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","type.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('souscat');
IdSousCat = sel.options[sel.selectedIndex].value;
// CodeSousCat appartient à la table types
xhr.send("IdSousCat="+IdSousCat);
}