Discussion :

[l-lXSS]

Bonjour le peuple !

Tout d'abord merci de prendre en compte le fait que je sois un néophyte en la matière, et bien que parcourant le web à la recherche d'une multitude de post sur le sujet, des tutos, des appels à l'aide .. peut-être que la réponse est déjà tombée sous mes yeux mais que je n'ai pas les capacités pour l'assimiler .. BREF :'(

Je suis parti de ce tuto pour autocomplétion sur 2 champs (Un grand merci déjà !)
J'ai mis 3 jours pour que ça fonctionne .. j'ai épuré le code pour que ce soit adapté à mon cas mais pour la dernière étape je ne sais même pas si elle est réalisable

Pour l'instant, j'ai deux champs input, le premier code postal, le second ville.
Je tape un code postal, la requête va chercher les résultats des villes dans la BDD et ça m'affiche une DIV façon Google Search je clique sur la ville correspondante et ça l'insère dans le second input ville.
Tout est OK c'est de toute beauté !

Mais ! Ce que j'aimerai avoir c'est deux champs, le premier input code postal, le second select ville
Je tape un code postal, la requête va chercher les résultats des villes dans la BDD et ça modifie le select en insérant les options ensuite je choisis le select correspondant à ma ville

Est-ce que c'est possible et facilement réalisable ?

Mon bout de code Javascript

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
<script type="text/javascript">
var cache = {};
$(function ()
{
	$("#inscriptioncp, #inscriptionville").autocomplete({
		source: function (request, response)
		{
			//Si la réponse est dans le cache
			if ((request.term) in cache)
			{
				response($.map(cache[request.term], function (item)
				{
					return {
						label: item.Ville,
						value: function ()
						{
							$('#inscriptionville').val(item.Ville);
							return item.CodePostal;
						}
					}
				}));
			}
			//Sinon -> Requete Ajax
			else
			{
				var objData = {};
					objData = { codePostal: request.term, maxRows: 20 };
 
				$.ajax({
					url: "./AutoCompletion.php",
					dataType: "json",
					data: objData,
					type: 'POST',
					success: function (data)
					{
						//Ajout de reponse dans le cache
						cache[(request.term)] = data;
						response($.map(data, function (item)
						{
							return {
								label: item.Ville,
								value: function ()
								{
									$('#inscriptionville').val(item.Ville);
									return item.CodePostal;
								}
							}
						}));
					}
				});
			}
		},
		minLength: 4,
		delay: 600
	});
});
 
</script>

Mon bout de code 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
<?php
require_once('AutoCompletionCPVille.class.php');
 
//Initialisation de la liste
$list = array();
 
//Connexion MySQL
try { $db = new PDO('mysql:host=localhost;dbname=GLC', 'root', ''); }
catch (Exception $ex) { echo $ex->getMessage(); }
 
if ($_POST["codePostal"]{0} == 0) {
$_POST["codePostal"] = substr($_POST["codePostal"],1);
}
 
//Construction de la requete
$strQuery = 'SELECT CP CodePostal, VILLE Ville FROM codepostal WHERE LENGTH(CP) = LENGTH('.$_POST["codePostal"].') AND CP LIKE :codePostal ORDER BY VILLE ';
 
//Limite
if (isset($_POST["maxRows"]))
{
    $strQuery .= 'LIMIT 0, :maxRows';
}
$query = $db->prepare($strQuery);
$value = $_POST["codePostal"]."%";
$query->bindParam(":codePostal", $value, PDO::PARAM_STR);
 
//Limite
if (isset($_POST["maxRows"]))
{
    $valueRows = intval($_POST["maxRows"]);
    $query->bindParam(":maxRows", $valueRows, PDO::PARAM_INT);
}
 
$query->execute();
 
$list = $query->fetchAll(PDO::FETCH_CLASS, "AutoCompletionCPVille");;
 
foreach ($list as $row){
$row->Ville = utf8_encode($row->Ville);
}
 
echo json_encode($list);
 
?>

Naïvement j'espérais qu'ayant le résultat attendu c'était juste la mise en forme qui était à revoir mais en regardant ce second tuto chapitre IV, la méthode employée est TOTALEMENT différente avec problème de compatibilité navigateurs notamment ie (d'où quelques craintes..)
Cependant est-ce que la solution serait dans ce coin là ?
Faire un mix des deux méthodes pour que ça coïncide à ce que je recherche comme résultat ?

Merci à la personne qui prendra un peu de son temps pour m'éclairer

[mathieu]

mais en regardant ce second tuto chapitre IV, la méthode employée est TOTALEMENT différente

dans cet article, c'est du JavaScript "brut" qui est utilisé donc la façon de codée est un peu différente mais le résultat est le même.
avec une bibliothèque comme jQuery, ce sont plein de traitements habituels qui sont simplifiés et qui sont faisable avec moins de code

par exemple le code suivant cherche l'élément HTML avec l'identifiant "inscriptionville"

Code :

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

$('#inscriptionville')

la création d'un menu déroulant est aussi facile :

Code :

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

1
2
3
4
5
6
var menu = $("<select></select>");
menu.append(
    $("<option></option>")
        .html("texte")
        .attr("value", "valeur")
);

et pour finir la mise en place du menu dans la page :

Code :

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

$('#inscriptionville').replaceWith(menu);

vous trouverez plus de méthodes dans la documentation :
http://api.jquery.com/

[l-lXSS]

Merci beaucoup de m'avoir rassurer sur la méthode à employer !
Effectivement pour moi c'est du chinois je ne comprenais pas pourquoi le tuto que j'avais choisi était écrit aussi bizarrement .. javascript c'est vraiment pas mon domaine

Donc après avoir été confronté à quelques undefined .. [object OBJECT] .. requête non exécutée .. requête exécutée mais liste vide .. problème de cache .. quelques centaines de rafraichissement de page plus tard pour en arriver à ce bout de code où je suis proche du résultat final je pense

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
						//Ajout de reponse dans le cache
						cache[(request.term)] = data;
 
						//on regarde si villes existantes
						if(jQuery.isEmptyObject(data)){
							var listeville = $("<select id=\"inscriptionville\"></select>");
							listeville.append(
							$("<option value=\"0\">Aucune ville trouvée</option>")
							);
						}
						else {
						//on déclare le nouveau select
						var listeville = $("<select id=\"inscriptionville\"></select>");
						listeville.append(
						$("<option value=\"0\">Choisissez votre Ville</option>")
						);
						//on boucle pour avoir les villes dans les options
						var puces = ''; 
						for (var i in data) {
							puces += '<option value="'+data[i].idCodePostalVille+'">' + data[i].Ville + '</option>';
						}
						listeville.append(puces);
						}
 
						//on remplace le select nouvellement déclaré
						$('#inscriptionville').replaceWith(listeville);
						//return item.CodePostal;

Donc là, à la base j'affiche mon SELECT avec un statut <option ="0">Attente Code Postal</option>
Si je rentre un code postal qui me retourne aucune ville, je change mon SELECT avec un statut <option ="0">Aucune Ville trouvée</option>
Sinon résultat de la requête
<option ="0">Choisissez votre Ville</option>
<option ="idVille1">Ville1</option>
<option ="etc">etc</option>

Les résultats sont OK
Mais .. petit détail qui me choque. Si le résultat me retourne une liste de villes, lorsque j'ouvre le SELECT pour faire mon choix, je retrouve en haut de la liste le "Choisissez votre Ville" alors qu'il est déjà inscrit dans le SELECT
du coup ça me l'affiche 2 fois l'un au dessus de l'autre c'est pas très joli joli
Est-ce qu'une bidouille existe pour supprimer l'option 0 au focus ?

Mais surtout, et là c'est beaucoup plus embêtant.. si je fais une soumission formulaire le choix n'est pas enregistré je perds la ville sélectionnée
Pourtant si je fais le même formulaire mais non dynamique, je soumets je retrouve bien la valeur de l'idVille donc pourquoi en dynamique ça ne passe plus ?

Et là mon petit doigt me dit que le script ne fait qu'afficher les résultats dans le select et que si je ne lui dis pas de regarder sur le onchange il ne fera rien de plus .. c'est ça ?

[mathieu]

Mais .. petit détail qui me choque. Si le résultat me retourne une liste de villes, lorsque j'ouvre le SELECT pour faire mon choix, je retrouve en haut de la liste le "Choisissez votre Ville" alors qu'il est déjà inscrit dans le SELECT
du coup ça me l'affiche 2 fois l'un au dessus de l'autre c'est pas très joli joli
Est-ce qu'une bidouille existe pour supprimer l'option 0 au focus ?

la plupart des menus déroulants contiennent sur la 1re ligne ce genre de texte donc je pense que la plupart des utilisateurs ne devraient pas être gênés par cela

Mais surtout, et là c'est beaucoup plus embêtant.. si je fais une soumission formulaire le choix n'est pas enregistré je perds la ville sélectionnée
Pourtant si je fais le même formulaire mais non dynamique, je soumets je retrouve bien la valeur de l'idVille donc pourquoi en dynamique ça ne passe plus ?

Et là mon petit doigt me dit que le script ne fait qu'afficher les résultats dans le select et que si je ne lui dis pas de regarder sur le onchange il ne fera rien de plus .. c'est ça ?

c'est une soumission en passant par la balise "form" et non en JavaScript ? dans ce cas il faut surement rajouter un attribut "name" au menu déroulant

[l-lXSS]

Pour ce qui est de la première ligne je vais effectivement rester sur le résultat obtenu parce que de toute façon j'image que le résultat serait
Ville1
Ville1
Ville2
Ville$

au lieu de
Choisissez..
Choisissez..
Ville1
Ville$

donc au final cela ne ferait que déplacer le problème..

Pour le reste, effectivement c'était bien ça .. solution:

Code :

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

var listeville = $("<select name=\"inscriptionville\" id=\"inscriptionville\"></select>");

dans mon formulaire j'ai que des balises name/id .. là je fais un peu de javascript et hop j'écris n'importe comment

Merci beaucoup, je crois que j'ai mérité mon biscuit
Et pour la peine, je te dédicace le second !

Sujet résolu !

[l-lXSS]

Heu.. question bête mais .. est-ce que j'ai le droit de déclarer dans le petit bout de code AutoCompletion.php qui contient la requête un session_start(); alors que dans mon fichier formulaire index.php j'ai déjà

Code :

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

1
2
3
4
5
6
session_start();
 
if (isset($_SESSION['idmembre'])) {
	header ('Location: moncompte.php');
	exit();
}

A priori ça fonctionne j'ai pas d'alerte Notice: A session had already been started - ignoring session_start() mais est-ce bien logique ? J'ai vu quelques post forum de personnes ayant des problèmes à cause de ça
Après je bosse en local .. php est peut être plus permissif

En fait je veux sauvegarder les données de la requête en $_SESSION et pas uniquement le "selected" afin de pouvoir les réafficher s'il y a un problème de soumission formulaire qui redirige vers index.php (quelconque alert..)
Du coup pour l'instant je fais un session_start et je mets le json obtenu en variable de SESSION mais j'ai un doute, est-ce la bonne méthode ?