Discussion :

[nico72]

Bonjour,

Je cherche a peupler un select en jquery, a partir d'un autre champ.

J'ai un champ code postal ou l'utilisateur rentre son code postal et une liste a coté qui doit m afficher la ou les villes correspondantes.

Je n ai pas idée de comment faire, si quelqu un a des pistes je suis preneur.

[Bovino]

append() ?

[nico72]

Merci,

Etant novice au niveau jquery, c est plus une question de compréhension globale du probleme pour moi.

Comment cela se passe t il ?

l'utilisateur tape un code dans le champ 1. Outre les diverses vérifications, je voudrais que cela declenche une interro bdd (php je suppose). Une fois les résultats obrtenus, comment les récupérer avec jQuery ?

Après, append() semble etre la solution, en effet.

[nico72]

Pour + d'infos, j ai testé append()

Mon jquery

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
   		$('#loc').keyup(function()
		{
    		$('#sel_city').append("<option>"+$('#loc').val()+"</option>");;
		})
 	});

Mon html

Code :

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

1
2
3
4
5
6
7
8
<form method="post" action="search_ann.php" id="search">
   					<p>
       				<label for="loc">Localisation</label><input type="text" name="loc" id="loc" size="20" maxlength="40" />
						<select name="" id="sel_city">
						</select>
   					</p>
					<input value="RECHERCHE >>>" id="btn_engine_p" tabindex="50" type="submit" style="color:white;font-weight:bold;background:green;border:2px solid grey;">
				</form>

Mon souci, c est que je n arrive pas a lier tout ça.

Je fais une interro bdd via php pour connaitre le nom des villes qui correspondent au code postal entré par l'utilisateur, mais je ne sais pas comment utiliser le résultat via jquery pour l'afficher dans mon select

[nico72]

Bon, je viens de faire un truc qui marche mais dont je ne sais pas si c est bien correct :

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
   		$('#loc').keyup(function()
		{
		var long = $('#loc').val();
			if(long.length == 2)
			{
				$('#sel_city').append("<option>"+'<?php echo $mavariabletantattendue; ?>'+"</option>");
    		};
		})
 	});

J attends vos avis pour vous soumettre la suite

Par avance merci

[nico72]

Encore moi,

Depuis le lancement de ce post, je tourne, je vire, j'essaie de comprendre ... mais j'y comprends pas grand chose.

Je me suis rendu a l'adresse suivante : http://jquery.developpeur-web2.com et j ai essayé de trouver ce qui pouvait correspondre.

La grande question pour moi est : comment ça tourne tout ça.

Il n y a pas de soummission de formulaire et il faut pourtant que ma page php recoive le code postal pour aller chercher les villes en bdd.

Il faut egalement que mon script recupere ces resultats pour pouvoir les afficher.

Je sèche complètement. J'ai la vague intuition qu il faudrait utiliser $ajax mais meme pas sur.

Je continue de chercher mais si quelqu'un pouvait me filer un petit coup de pouce, ce serait le bienvenu

A+

[NoSmoking]

Bonsoir,

J'ai la vague intuition qu il faudrait utiliser $ajax mais meme pas sur.

dans le mille, cela a comme doux nom listes liées
- Pour t'éclairer sur l'AJAX Les cours
- Un tutoriel bien intéressant Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

...après libre à toi de le mettre à la sauce jQuery

[nico72]

Voila ou j arrive :

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
 
$(function(){
		$("#loc").keyup(function (){				
		var code = "code= "+$("#loc").val() 
				$.ajax({
   				type: "POST",
   				url: "test.php",
   				data:code ,
   				success: function(){
     			alert( code );
   				}
 				});				
 
		});
		return false;
	});

Si j ai bien compris, avec cette fonction j envoie ma variable loc a la page test.php.

Dans cette page php, si j ai bien compris, je dois encoder mes donnees en JSON.

Comment les recuperer maintenant ?

[NoSmoking]

pour plus d'info...
http://api.jquery.com/jQuery.ajax/
ou encore
http://api.jquery.com/jQuery.getJSON/
et bien sûr
Comment dois-je formuler une requête AJAX ?

[nico72]

Bonjour,

Après avoir un peu avancé, je poste ici le résultat de mes recherches :

Voici d abord mon index.php avec le 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Titre de la page</title>
    <meta name="keywords" lang="fr" content="motcle1,mocle2" />
    <meta name="description" content="Description de ma page web." />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <link href="styles/style_menu.css" rel="stylesheet" type="text/css" />
	<link href="styles/styles.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" language="Javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
 
	$(function(){
 
	$("#loc").keyup(function (){	
	var code = $("#loc").val();
		if (code.length == 5)	{		
		$("#sel_city").empty();
		$.ajax({
   		type: "POST",
   		url: "test.php",
   		data:"code ="+code ,
		dataType:"json",
   		success: function(tableau){	
			var villages = tableau;
			for(var key in villages) {
    			$("#sel_city").append("<option>"+villages[key]+"</option>");
			}		
  		}		   				
 		});
		}
	});
 
});
 
 
 
	</script>
 
	<style>
	#cont_princ{width:980px;height:500px;margin:auto;border:1px solid green;}
	#cont_menu{width:980px;height:60px;border:1px solid red;background:yellow;}
	#cont_menu div {float:left;border:1px solid red;margin-right:10px;color:green;padding:15px;padding-top:3px;padding-bottom:3px;}
	#form_search{width:980px;height:300px;border:1px solid black;}
	#parts{width:220px;height:300px;border:1px solid black;float:left;}
	#search{width:600px;height:300px;float:left;}
	#empt{width:150px;height:300px;border:1px solid black;float:left;}
	#connex_util{background:grey;margin-top:0px;}
	#connex_util label{height:12px;padding:3px;}
	#connex_util input{height:12px;padding:3px;margin:5px;border:1px solid grey;color:red;font-weight:bold;line-height:0.8;}
 
	</style>
</head>
<body>
<div id="cont_princ">
 
	<a href="#"><div id="head" style="width:980px;height:80px;background-image:url(grafs/logofirst.jpg);background-repeat:no-repeat;">
 
	</div></a>
 
	<div id="connect" style="width:980px;height:50px;border:1px solid red;padding-bottom:5px;background:grey;">
		<form method="post" action="connex_mb.php" id="connex_util">
   			<p>
       			<label for="login">Login</label><input type="text" name="login" id="login" size="10" maxlength="8" />
				<label for="mpasse">Mot de passe</label><input type="password" name="mpasse" id="mpasse" size="10" maxlength="8" />
   			</p>
		</form>
	</div>
	<div id="cont_menu">			
			<div><input type="radio" name="cat" value="1" />Achat</div>
			<div><input type="radio" name="cat" value="2" />Location</div>
			<div><input type="radio" name="cat" value="3" />Viager</div>
			<div><input type="radio" name="cat" value="4" />Immobilier d'entreprise</div>
			<div><input type="radio" name="cat" value="5" />Fonds de commerce</div>
			<div><input type="radio" name="cat" value="6" />Vacances</div>
	</div> 
	<div id="corps">		
		<div id="form_search">
			<div id="parts">
			</div>
			<div id="search">
				<form method="post" action="test.php" id="search">
   					<p>
       				<label for="loc">Localisation</label><input type="text" name="loc" id="loc" size="20" maxlength="40" />
						<select name="sel_city" id="sel_city">
							<option>Villes</option>
						</select>
   					</p>
					<input value="RECHERCHE >>>" id="btn_engine_p" tabindex="50" type="submit" style="color:white;font-weight:bold;background:green;border:2px solid grey;">
				</form>
			</div>
			<div id="empt">
			</div>
		</div>
	</div
 
</div>
 
</body>
</html>i

Puis le fichier test.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
require_once ('incl_php/inc_connex.inc');
mysql_select_db('basetest_db') OR die('Sélection de la base impossible');
 
$code = $_POST['code'];
$tableau = array();
 
$sql = "SELECT * FROM test WHERE value='$code'";
 
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 
$resultat=mysql_query($req); 
 
while($ligne = mysql_fetch_array($req))     
{ 
	$tableau [$code]=array($ligne[2]); 
}  
echo json_encode($tableau)  ;

J ai l'impression que $code = $_POST['code'];
ne récupère rien du tout.

Ça ne marche pas.

Par contre, si je remplace mon fichier test .php par :

Code :

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

1
2
3
4
5
6
 
$tableau = array();
$tableau [32290]= array("village 1"); 
$tableau [32000]= array("village 2"); 
$tableau [32400]= array("village 3");
$tableau [32400]= array("village 4", "village 5"); // 2 villes pour 1 code

Là ça fonctionne bien.

Je présume donc que le probleme se situe dans l'envoi/réception de ma variable code, et peut être dans la génération de mon tableau.

Dans l'attente de vos avis sur la question

[nico72]

Je viens de trouver une partie de la réponse, alors la voici pour ceux que ça intéressent :


dans test.php

Code php :

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

1
2
3
4
5
6
while($ligne = mysql_fetch_array($req))
{
	$id=$ligne['id'];
	$nom_ville = $ligne['nom_ville'];
	$tableau [$moncode][]= array($nom_ville);
}

Tout simplement

Autre chose :

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
$(function(){
 
	$("#loc").keyup(function (){	
	var code = $("#loc").val();
		if (code.length == 5)	{		
		$("#sel_city").empty();
		$.ajax({
   		type:"POST",
   		url:"test.php",
   		data:code,
		dataType:"json",
   		success: function(tableau){	
			var villages = tableau[moncode];
			for(var key in villages) {
    			$("#sel_city").append("<option>"+villages[key]+"</option>");
			}		
  		}		   				
 		});
		}
	});
 
});

Ca devrait m envoyer la variable code au fichier test.php et je devrai pouvoir la récupérer au moyen de :

Code php :

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

$code = $_POST['moncode'];

Ben non, j ai rien.

D ailleurs un alert dans la fonction success ne marche pas.

Si quelqu'un a des pistes ...

[NoSmoking]

si tu veux faire un $code = $_POST['moncode']; il te faut passer la clé de récupération data:'moncode=' +code,

[nico72]

Un grand merci a toi, ça marche pile poil

A+