[AJAX] Listes liées avec Ajax

**Zak_92** · 11/08/2007, 15h19

Bonjour à tous,

J'ai trois listes déroulantes :

Comptes | Mules | Type

Comptes m'affiche les mules ==> fonction gomules) Ok
Mule devrait m'afficher les types ==> fonction gotype()

J'ai limpression que la fonction gotype n'est pas appelée.
Pourriez vous me dire si j'ai des erreurs car cela fait une semaine que je cherche et que je ne trouve pas. Merci davance de votre aide

Ci dessous mes sources :

Le fichier mesfonc.js

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
// Creation de l'objet XMLHttpRequest
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;
}
 
 
/* Gestion de la liste déroulante des mules */
function gomule()
{
	alert("gomule");
	var xhrmule = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhrmule.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhrmule.readyState == 4 && xhrmule.status == 200)
		{
			leselect = xhrmule.responseText;
			// Ajoute les options a la liste via lid du div
			document.getElementById('div_mule').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhrmule.open("POST","ajaxmules.php",true);
	// ne pas oublier ça pour le post
	xhrmule.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments ici le compte via l'id du select
	var selcpte = document.getElementById('lst_cpte');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
	var data = "dcpte="+cptesel;
	xhrmule.send(data);
}
 
 
/* Gestion de la liste déroulante des types */
function gotype()
{
	alert("gotype");
	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)
		{
			leselecttype = xhr.responseText;
			// Ajouter les options a la liste via l'id du div
			document.getElementById('div_type').innerHTML = leselecttype;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxtypes.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Poste les arguments le compte puis la mule via l'id du select
	var selcpte = document.getElementById('lst_cpte');
	var cptesel = selcpte.options[selcpte.selectedIndex].value;
 
	var selmule = document.getElementById('lst_mule');
	var mulesel = selmule.options[selmule.selectedIndex].value;
 
	var datatype = "dcpte="+cptesel+"&dmule="+mulesel;
	xhr.send(datatype);
	alert(datatype);
}

Mon formulaire principal

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
 
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="mesfonc.js" type="text/javascript"></script>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Compte</label>
				<select name="lst_cpte" id="lst_cpte" onchange="gomule()">
					<option value="-1">Aucun</option>
					<?php
                                                $res = mysql_query("SELECT DISTINCT compte FROM t_inventaire_cpte");
                                                while($row = mysql_fetch_assoc($res)){
                                                echo "<option value='".$row['compte']."'>".$row['compte']."</option>";
                                                }
                                        ?>
				</select>
 
				<label>Mules</label>
				<div id="div_mule" style="display:inline">
				<select name="lst_mule" id="lst_mule" onchange="gotype()">
					<option value="-1">Choisir une mule</option>
				</select>
				</div>
 
				<label>Type</label>
				<div id="div_type" style="display:inline">
				<select name="lst_type" id="lst_type">
					<option value="-1">Choisir un type</option>
				</select>
				</div>
 
			</fieldset>
		</form>
	</body>
</html>

le fichier ajaxtypes.php

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
 
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
        echo "<select name='lst_type'>";
        if(isset($_POST["dcpte"]) || (isset($_POST["dmule"]))
        {
                $res = mysql_query("SELECT DISTINCT type FROM t_inventaire_cpte"
//              . " WHERE compte = 'BKL3_3' AND mule= 'Mule 4' ORDER BY type";
                 . " WHERE compte = '".$_POST['dcpte']."' AND mule= '".$_POST['dmule']."' ORDER BY type";
                 while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["type"]."'>".$row["type"]."</option>";
                }
        }
        echo "</select>";
?>

le fichier ajaxmules.php

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
 
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
        echo "<select name='lst_mule'>";
        if(isset($_POST["dcpte"]))
        {
                $res = mysql_query("SELECT DISTINCT mule FROM t_inventaire_cpte"
                 . " WHERE compte = '".$_POST["dcpte"]."' ORDER BY mule");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["mule"]."'>".$row["mule"]."</option>";
                }
        }
        echo "</select>";       
?>

**d-Rek** · 13/08/2007, 09h57

On peut voir tourner la chose ?

**Zak_92** · 13/08/2007, 10h33

Bonjour d-Rek,

Désolé je n'ai pas mis en ligne mes modifications, pour le moment je travaille en local. Là je suis au boulot je mettrais en ligne ce soir à la maison.

Peut être peux tu me mettre sur la voix sans voir le site.

Merci à toi.

**d-Rek** · 13/08/2007, 10h36

Bah j'aimerai utiliser mon débugger Javascript Favori pour remonter à la source du problème. Le débugger intégré à FF est suffisement efficace normalement pour que tu puisses identifier ton/tes problème(s).

**Zak_92** · 13/08/2007, 11h40

Re d-Rek,

Voilà je viens de mettre en ligne.

voici le lien :

Mon site

Il suffit de cliquer sur le bouton [test liste].

Merci encore de ton aide.

**d-Rek** · 13/08/2007, 17h30

Bonne nouvelle, RAS sous FF.
Ton code source a l'air clean vu par le panda roux.

Code :

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

1
2
3
leselect = xhrmule.responseText;
// Ajoute les options a la liste via lid du div
document.getElementById('div_mule').innerHTML = leselect;

Tu peux faire un alert(xhrmule.responseText); ? après ton document.getEl...
Comme tu remplaces tout ton select avec les options j'ai peur que tu aies oublié ta balise <select> avec ton onchange... cf. ajaxmules.php ou ajaxtypes.php

PS : pour économiser des char :

Code :

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

function $(id){return document.getElementById(id);}

Comme ça tu remplaces tout tes "document.getElementById" par $
Magique

[AJAX] Listes liées avec Ajax

JavaScript

Vue hybride

Discussions similaires

Partager

Partager