[AJAX] Listes liées

**E.Bzz** · 05/06/2008, 13h36

Envoyé par corsamobile

par contre quand je choisi la reference dans le menu deroulant, le menu deroulant des references reste vide!

Celui alimenté par Ajax ?

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

oui, je sais pas si ca viens de la requete ou bien du script ajax

**E.Bzz** · 05/06/2008, 13h42

Si tu tapes l'url (complète : avec les paramètres) appelée par Ajax, directement dans la barre d'adresse du nav, tu obtiens bien ta liste alimentée ?

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

j'ai pas tout saisi dsl!
il faut que je tape quoi dans la barre d'adresse du nav?

**E.Bzz** · 05/06/2008, 14h01

Envoyé par E.Bzz

Si tu tapes l'url (complète : avec les paramètres) appelée par Ajax

Ben .... l'url appelée par Ajax

Celle que tu utilises dans le open() avec les paramètres envoyés via le send()

A+

**corsamobile** · 05/06/2008, 14h51

on peut mettre une alert pour voir ce qu'il renvoi dans le post?

**E.Bzz** · 05/06/2008, 14h56

Envoyé par E.Bzz

Si tu tapes l'url (complète : avec les paramètres) appelée par Ajax, directement dans la barre d'adresse du nav, tu obtiens bien ta liste alimentée ?

Tu l'as fait ou pas ?
Pas besoin d'alert()

A+

**corsamobile** · 05/06/2008, 14h59

non je sais pas comment faire!
la tu me pose une colle!

il faut ke je retape ca :

Code :

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

1
2
3
4
5
 
xhr.open("POST","../ajax1.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				ref_pdt_prises = document.getElementById('prises').options[document.getElementById('prises').selectedIndex].value;
				xhr.send("ref_pdt="+ref_pdt_prises);

dans la barre URL?

**E.Bzz** · 05/06/2008, 15h05

Code :

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

http://url_de_ton_site/ajax1.php?ref_pdt=xxxx

xxx étant une référence valide dans ta base ...

A+

**corsamobile** · 05/06/2008, 15h12

d'accord je ne savais pas!

alors il me donne une liste deroulante vide!

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

Envoyé par corsamobile

alors il me donne une liste deroulante vide!

Donc c'est ton php qui ne génère pas les options correctement : continue ta recherche de ce côté là jusqu'à obtenir de cette manière une liste alimentée.
Ensuite seulement, retourne essayer avec Ajax.

En effet, ce n'est pas la peine de tenter autre chose tant que le serveur ne répond pas correctement ...

A+

**corsamobile** · 05/06/2008, 15h44

ok merci

**corsamobile** · 06/06/2008, 16h57

c'est bon j'ai resolu mon probleme!

je donne les code :

j'ai changer ma base de données, j'ai fais deux tables

reference :
id
ref_pdt

designation :
id
des_pdt
Id_ref

voici les codes

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
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
89
90
91
92
93
94
95
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			//var xhr = null; 
 
			// 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;
			}
 
			// Compatibilité avec le script du tutoriel AJAX (developpez.com)
			getXhr=GetXmlHttpRequest;
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
			   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('designation').innerHTML = leselect;
			      }
			   }
			   // Ici on va voir comment faire du post
			   xhr.open("POST","./ajax1.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('Id_ref');
			   id_ref = sel.options[sel.selectedIndex].value;
        		   xhr.send("Id_ref="+id_ref);
			}
	</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>commande</legend>
				<label>reference</label>
				<select name='reference' id='Id_ref' onchange='go();'>
					<option value='-1'>Aucun</option>
					<?php
                                                include ('connexion.php');
                                                $res = mysql_query("SELECT * FROM reference");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["ref_pdt"]."</option>";
                                                }
                                        ?>
				</select>
				<label>designation</label>
				<div id='designation' style='display:inline'>
					<select name='designation'>
						<option value='-1'>designation</option>
					</select>
				</div>
		</form>
	</body>
</html>

ajax1.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
 
<?php
	if(isset($_POST["Id_ref"])){
		if ($db=mysql_connect('sql.arcotec.fr','arcotecfr','Flgv+532') ) {
			if (mysql_select_db('arcotecfr',$db) ) {
				$requete = "SELECT * FROM designation WHERE Id_ref=".$_POST["Id_ref"]."";
				if ($res = mysql_query($requete) ) {
					echo "<select name='designation'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["Id"]."'>".$row["des_pdt"]."</option>";
					}
					echo "</select>";
				} else {
					echo "Erreur de requête";
				}
			} else {
				echo "Erreur sélection de base de données";
			}
		} else {
			echo "Erreur de connexion mysql";
		}
	} else {
		echo "Id_ref non défini";
    }
?>

merci encore à toi E.Bzz pour ta patience et on aide!

A+

**corsamobile** · 06/06/2008, 17h04

encore une petite question!

je voudrais mettre une deuxieme ligne identique avec les deux menu deroulant!
il m'affiche correctement la premiere ligne mais sur la deuxieme ligne quand je selectionne la reference il ne m'affiche pas la reference!

faut-il faire un truc special?

je donne le code que j'essai

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
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
 
	function go(){
			   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('designation').innerHTML = leselect;
			      }
			   }
			   // Ici on va voir comment faire du post
			   xhr.open("POST","./ajax1.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('Id_ref');
			   id_ref = sel.options[sel.selectedIndex].value;
        		   xhr.send("Id_ref="+id_ref);
			}
	</script>
	</head> 
 
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>commande</legend>
				<label>reference</label>
				<select name='reference' id='Id_ref' onchange='go();'>
					<option value='-1'>Aucun</option>
					<?php
                                                include ('connexion.php');
                                                $res = mysql_query("SELECT * FROM reference");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["ref_pdt"]."</option>";
                                                }
                                        ?>
				</select>
				<label>designation</label>
				<div id='designation' style='display:inline'>
					<select name='designation'>
						<option value='-1'>designation</option>
					</select>
				</div>
 
				<label>reference</label>
				<select name='reference' id='Id_ref' onchange='go();'>
					<option value='-1'>Aucun</option>
					<?php
                                                include ('connexion.php');
                                                $res = mysql_query("SELECT * FROM reference");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["ref_pdt"]."</option>";
                                                }
                                        ?>
				</select>
				<label>designation</label>
				<div id='designation' style='display:inline'>
					<select name='designation'>
						<option value='-1'>designation</option>
					</select>
				</div>
		</form>
	</body>
</html>

merci

**E.Bzz** · 06/06/2008, 17h05

Ravi que tu y sois arrivé

EDIT : Arf ! Pas vu la question bonus

A+

**E.Bzz** · 06/06/2008, 17h09

Envoyé par corsamobile

je voudrais mettre une deuxieme ligne identique avec les deux menu deroulant!
il m'affiche correctement la premiere ligne mais sur la deuxieme ligne quand je selectionne la reference il ne m'affiche pas la reference!

faut-il faire un truc special?

On a déjà évoqué, me semble-t-il (mais j'ai la flemme de tout relire

) le fait qu'un id doive être unique ?

... et bien c'est toujours le cas :

Code :

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

1
2
3
<select name='reference' id='Id_ref' onchange='go();'>
...
<select name='reference' id='Id_ref' onchange='go();'>

==> utilise Id_ref1 et Id_ref2 et adapte tes fonctions en conséquence

A+

**corsamobile** · 10/06/2008, 11h17

merci encore de tes lumières ca m'a beaucoup aider!

maintenant j'aimerai mettre une troisième liste.

je m'explique :

quand je selectionne dans ma première liste deroulante, il faut que la deuxième et la troisième s'affiche automatiquement.

je ne sais par ou commencer!

peux tu m'aider encore une fois?

merci

**E.Bzz** · 10/06/2008, 11h27

Il te faut dupliquer ton <select> (avec un id différent) et ton appel Ajax (donc ta page php, ou la rendre paramétrable).

Tu peux ajouter un paramètre à ta fonction go().
Actuellement elle mets à jour un select dont la référence est en dur :

Code :

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

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

Utilise ce nouveau paramètre pour permettre la mise à jour de l'un ou l'autre des 2 select ...

L'essentiel est déjà fait

A+

**corsamobile** · 10/06/2008, 11h40

et il faut ke je crée une autre requete?

**corsamobile** · 10/06/2008, 16h39

alors j'ai fait un debut mais ca deconne un peu et j'arrive pas trouver le probleme!

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

ajax.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
 
<?php
//requete1
	if(isset($_POST["Id_ref"])){
		if ($db=mysql_connect('sql.arcotec.fr','arcotecfr','Flgv+532') ) {
			if (mysql_select_db('arcotecfr',$db) ) {
				$requete = "SELECT * FROM designation WHERE Id_ref=".$_POST["Id_ref"]."";
				if ($res = mysql_query($requete) ) {
					echo "<select name='designation'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["Id"]."'>".$row["des_pdt"]."</option>";
 
						}
						echo "</select>";
						}
						if ($res = mysql_query($requete) ) {
					echo "<select name='Qte'>";
					while($row = mysql_fetch_assoc($res)){
						echo "<option value='".$row["Id"]."'>".$row["Qte"]."</option>";
 
						}
						echo "</select>";
						} else {
					echo "Erreur de requête";
				}
			} else {
				echo "Erreur sélection de base de données";
			}
		} else {
			echo "Erreur de connexion mysql";
		}
	} else {
		echo "Id_ref1 non défini";
    }
 
?>

j'ai mis une pièce jointe pour vous montrer ce que cela fait!

merci

[AJAX] Listes liées

JavaScript

Discussions similaires

Partager

Partager