peuplement select jquery

Version imprimable

25/09/2011, 15h46
nico72

peuplement select jquery

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.
26/09/2011, 09h50
Bovino

append() ?
26/09/2011, 10h40
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.

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

Mon jquery
Code:

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

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

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

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

28/09/2011, 20h02
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+
28/09/2011, 22h48
NoSmoking

Bonsoir,

Citation:

Envoyé par nico72

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

Voila ou j arrive :
Code:

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 ?

03/10/2011, 23h05
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 ?

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:

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:

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:

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

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

dans test.php
Code:

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:

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:

$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 ...

05/10/2011, 21h28
NoSmoking

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

Un grand merci a toi, ça marche pile poil

A+