[AJAX] Listes liées

**corsamobile** · 04/06/2008, 15h23

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 :

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
 
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 :

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

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.

**E.Bzz** · 04/06/2008, 15h42

Bonjour,

Code :

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

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

multiprises n'existe pas dans ta page ...

A+

**corsamobile** · 04/06/2008, 16h28

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

**E.Bzz** · 04/06/2008, 16h35

Envoyé par corsamobile

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

Ben ... 'multiprises'

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

Puisque c'est

Code :

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

<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 :

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

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

Ca éclaircit un peu les choses ?

A+

**corsamobile** · 04/06/2008, 16h56

merci pour la solution,

j'avais pas vu ca sur cet angle la!

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

**E.Bzz** · 04/06/2008, 16h59

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 :

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

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+

**corsamobile** · 05/06/2008, 10h00

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 :

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
 
<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 :

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

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

**E.Bzz** · 05/06/2008, 10h14

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+

**E.Bzz** · 05/06/2008, 10h16

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+

**corsamobile** · 05/06/2008, 11h08

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

mais je ne sais pas du tt utiliser la syntaxe DOM!

**E.Bzz** · 05/06/2008, 11h13

Envoyé par corsamobile

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

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

A+

**corsamobile** · 05/06/2008, 11h35

en faite tu me demande d'enlever tout ca :

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
 
		<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?

**E.Bzz** · 05/06/2008, 11h39

Non.
Enlève juste

Code :

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

<form>

et

Code :

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

</form>

A+

**corsamobile** · 05/06/2008, 11h41

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

**E.Bzz** · 05/06/2008, 11h49

Envoyé par corsamobile

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

Aucun rapport

Tu as essayé d'enlever les balises <form> ?

**corsamobile** · 05/06/2008, 11h56

oui, ca ne change rien!

**corsamobile** · 05/06/2008, 12h00

je te remet le code avec quelques modifs

affichage.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
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 :

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
 
        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!

**E.Bzz** · 05/06/2008, 12h17

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

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

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

A+

**E.Bzz** · 05/06/2008, 12h18

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+

**corsamobile** · 05/06/2008, 13h07

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!

[AJAX] Listes liées

JavaScript

Discussions similaires

Partager

Partager