[AJAX] Listes liées

Version imprimable

Voir 40 message(s) de cette discussion en une page

[AJAX] Listes liées

bonjour à tous,

je suis novice dans l'apprentissage de l'ajax!
j'ai lu le tutoriel mais j'ai toujours un probleme avec ma liste liée qui en fait n'est qu'une seul table.

explication :

table multiprises
ref_pdt_prises (primary key)
des_pdt_prises

fichier afficage.php

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
41
42
 
function go(){
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						document.getElementById('multiprises').innerHTML = leselect;
					}
				}
 
 
				xhr.open("POST","index.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('multiprises');
				des_pdt_prises = sel.options[sel.selectedIndex].value;
				xhr.send("Des_pdt_prises="+des_pdt_prises);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>reference</label>
				<select name='ref' id='ref' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						include("connexion.php");
						$res = mysql_query("SELECT * FROM multiprises ORDER BY ref_pdt_prises");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["ref_pdt_prises"]."'>".$row["ref_pdt_prises"]."</option>";
						}
					?>
				</select>
				<label>designation</label>
				<div id='des' style='display:inline'>
				<select name='des'>
					<option value='-1'>designation</option>
				</select>
				</div>
			</fieldset>
		</form>

et index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
        echo "<select name='multiprises'>";
        if(isset($_POST["Des_pdt_prises"])){
                include("connexion.php"); 
                $res = mysql_query("SELECT ref_pdt_prises, des_pdt_prises FROM multiprises 
                        WHERE Des_pdt_prises=".$_POST["Des_pdt_prises"]." ORDER BY des_pdt_prises");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["des_pdt_prises"]."'>".$row["des_pdt_prises"]."</option>";
                }
        }
        echo "</select>";
?>

il m'affiche correctement la première liste mais pas la deuxième.
cela fait deux jours que j'essai mais n'y arrive pas!

merci pour votre aide.

04/06/2008, 15h42
E.Bzz

Bonjour,

Code:

document.getElementById('multiprises').innerHTML = leselect;

multiprises n'existe pas dans ta page ...

A+
04/06/2008, 16h28
corsamobile

merci pour ton aide,

mais c'est la première fois que je pratique l'ajax!

dsl mais je ne comprend pas trop ce que ca veut dire!

il manque quoi dans mon code pour que 'multiprises' puisse exister?

merci
04/06/2008, 16h35
E.Bzz

Citation:

Envoyé par corsamobile

il manque quoi dans mon code pour que 'multiprises' puisse exister?

Ben ... 'multiprises' :mrgreen:

Ta réponse Ajax est censée mettre à jour l'élément 'multiprises'.
Mais celui-ci n'existe pas ...

Puisque c'est

Code:

<select name='ref' id='ref' onchange='go()'>

que tu sembles vouloir mettre à jour, mets le dans un <div id="div_multiprises">.
Ton traitement de la réponse Ajax pourra être

Code:

document.getElementById('div_multiprises').innerHTML = leselect;

Ca éclaircit un peu les choses ?

A+
04/06/2008, 16h56
corsamobile

merci pour la solution,

j'avais pas vu ca sur cet angle la!

mais maintenant il execute la requete mais n'affiche rien!
mdr 8O
04/06/2008, 16h59
E.Bzz
Citation:

Envoyé par corsamobile

mais maintenant il execute la requete mais n'affiche rien!

On peut voir ton code modifié ?
Parce qu'en l'état actuel, le passage de paramètre doit pas être bon (pour la même raison que ci-dessus) :
Code:

1 2 3 sel = document.getElementById('multiprises'); des_pdt_prises = sel.options[sel.selectedIndex].value; xhr.send("Des_pdt_prises="+des_pdt_prises);
EDIT : tu dois même avoir une erreur : tu es sûr que ton nav te les signale bien ? :?

A+

salut et merci encore pour ton aide!

alors j'ai modifié mon code et mon navigateur ne me donne aucune erreur.

je redonne le code modifié

page affichage.php

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
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
 
<html>
	<head>
		<title>My webpage is rich</title>
		<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 change(){
 
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					//alert(xhr.readyState);
					// 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){
						di = document.getElementById('div_multiprises');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","index.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
				des_pdt_prises = document.getElementById('multiprises').options[document.getElementById('multiprises').selectedIndex].value;
				//alert(idauteur);
				xhr.send("Des_pdt_prises="+des_pdt_prises);
 
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>commande</legend>
				<label>reference</label>
 
				<select name='multiprises' id='multiprises' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                include("connexion.php");
                                                $res = mysql_query("SELECT * FROM multiprises ORDER BY ref_pdt_prises");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["ref_pdt_prises"]."'>".$row["ref_pdt_prises"]."</option>";
                                                }
                                        ?>
				</select>
				<label>designation</label>
				<div id='div_multiprises' style='display:inline'>
				<select name='multiprises'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

page index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
	echo "<select name='multiprises'>";
	if(isset($_POST["Des_pdt_prises"])){
		include("connexion.php"); 
		$res = mysql_query("SELECT ref_pdt_prises,des_pdt_prises FROM multiprises 
			WHERE Des_pdt_prises=".$_POST["Des_pdt_prises"]."");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["des_pdt_prises"]."'>".$row["Des_pdt_prises"]."</option>";
		}
	}
	echo "</select>";
?>

merci

05/06/2008, 10h14
E.Bzz

Ca semble mieux maintenant ...

Par contre, pour IE, il faudrait donner un name différent de 'multiprises' au <select> de réception. En effet, il confond name et id, et il doit se mélanger entre les 2 select (pour récupérer le param à envoyer) .....

A+
05/06/2008, 10h16
E.Bzz

Par contre, as-tu vraiment besoin de ce <form> (qui ne fait rien) ??

Parce que la modif d'un <form> via innerHTML pose problème : il faudrait passer pas les syntaxes DOM, ce qui est (beaucoup) plus propre, mais compléxifie une peu le code ;)

A+
05/06/2008, 11h08
corsamobile

donc tu pense que le probleme vient de la syntaxe <form>?

mais je ne sais pas du tt utiliser la syntaxe DOM!
05/06/2008, 11h13
E.Bzz

Citation:

Envoyé par corsamobile

donc tu pense que le probleme vient de la syntaxe <form>?

S'il ne t'est pas indispensable, vire le :mouarf:

A+

en faite tu me demande d'enlever tout ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
		<form>
			<fieldset style="width: 500px">
				<legend>commade</legend>
				<label>reference</label>
				<select name='div_multiprises' id='div_multiprises' onchange='change()'>
					<option value='-1'>reference</option>
					<?php
                                                include('connexion.php');
                                                $res = mysql_query("SELECT * FROM multiprises ORDER BY ref_pdt_prises");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["ref_pdt_prises"]."'>".$row["ref_pdt_prises"]."</option>";
                                                }
                                        ?>
				</select>
				<label>designation</label>
				<div id='multiprises' style='display:inline'>
				<select name='multiprises'>
					<option value='-1'>designation</option>
				</select>
				</div>
			</fieldset>
		</form>

et je le remplace par quoi?

05/06/2008, 11h39
E.Bzz

Non.
Enlève juste

Code:

<form>

et

Code:

</form>

A+
05/06/2008, 11h41
corsamobile

moi je pense que c'est parce que toutes les données sont dans une seul table!
05/06/2008, 11h49
E.Bzz

Citation:

Envoyé par corsamobile

moi je pense que c'est parce que toutes les données sont dans une seul table!

8O
Aucun rapport :roll:

Tu as essayé d'enlever les balises <form> ?
05/06/2008, 11h56
corsamobile

oui, ca ne change rien! 8O

je te remet le code avec quelques modifs

affichage.php

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
41
42
43
44
 
function change(){
 
				var xhr = getXhr();
 
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						di = document.getElementById('div_multiprises');
						di.innerHTML = xhr.responseText;
					}
				}
 
				xhr.open("POST","ajax1.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				ref_pdt_prises = document.getElementById('div_multiprises').options[document.getElementById('div_multiprises').selectedIndex].value;
				xhr.send("ref_pdt="+ref_pdt_prises);
 
 
			}
		</script>
	</head>
	<body>
		<fieldset style="width: 500px">
				<legend>commande</legend>
				<label>reference</label>
				<select name='div_multiprises' id='div_multiprises' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                include('connexion.php');
                                                $res = mysql_query("SELECT * FROM multiprises ORDER BY ref_pdt_prises");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["ref_pdt_prises"]."'>".$row["ref_pdt_prises"]."</option>";
                                                }
                                        ?>
				</select>
				<label>designation</label>
				<div id='prises' style='display:inline'>
				<select name='prises'>
					<option value='-1'>designation</option>
				</select>
				</div>
			</fieldset>
	</body>
</html>

index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
 
        echo "<select name='prises'>";
        if(isset($_REQUEST["ref_pdt"])){
                include('connexion.php');
                $res = mysql_query("SELECT ref_pdt_prises,des_pdt_prises FROM multiprises 
                WHERE ref_pdt=".$_REQUEST["ref_pdt"]." ORDER BY des_pdt_prises");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["des_pdt_prises"]."'>".$row["des_pdt_prises"]."</option>";
                }
        }
        else
                echo "<option value='-1'>designation</option>";
        echo "</select>";
?>

merci pour toute ton aide!:oops:

05/06/2008, 12h17
E.Bzz

Ca serais plus clair (et donc plus simple) si tes noms étaient logique : tu appelles div_multiprises un <select> :aie:

Et forcément, comme c'est divmultiprises que tu mets à jour, ça marche plus :aie:

Comme dit l'autre : c'était mieux avant ;)

A+
05/06/2008, 12h18
E.Bzz

Citation:

Envoyé par E.Bzz

Comme dit l'autre : c'était mieux avant ;)

=> reviens à l'étape précédente et enlève juste les balises <form> : je pense que c'était le seul problème (à ce moment là)

A+
05/06/2008, 13h07
corsamobile

Citation:

Envoyé par E.Bzz

=> reviens à l'étape précédente et enlève juste les balises <form> : je pense que c'était le seul problème (à ce moment là)

A+

alors je suis revenu à l'étape precedente et j'ai enlever les balises <form>.

je pense que la première requete pour afficher les références passe bien! car il m'affiche correctement les references se trouvant sur ma base de donnée.
par contre quand je choisi la reference dans le menu deroulant, le menu deroulant des references reste vide!

Voir 40 message(s) de cette discussion en une page