Bonjour,

Je suis actuellement en train de coder une page qui, d'un input, va récupérer les enregistrements de ma BDD via un LIKE et qui me renvoient la réponse en AJAX formatée en JSON.

Or, si jamais le code PHP trouve plusieurs enregistrements, il ne me renvoie que le premier. Pour ce qui est de la solution pour le PHP j'ai trouvé mais j'aimerais savoir comment faire pour que sur mon formulaire, si j'ai plusieurs enregistrements, je puisse afficher une liste afin de sélectionner l'enregistrement que je veux?

Par exemple, j'ai trois enregistrements, au moment de la réponse JSON, une petite liste se déroule en dessous de mon input et m'affiche les trois enregistrements afin que j'en sélectionne un.

Merci d'avance.

Bah, coté php :

<?php
$arr = array();
$sql = '..';
$req = mysql_query($sql);
while($data = mysql_fetch_assoc($req)) {
	$arr[] = array($data['nom'], $data['id']); // Tout ce que tu veux recup
}

echo json_encode($arr);
?>

Et coté Javascript :

function responseAjax(data) {
	data = JSON.parse(data);
	
	if (data.length > 1) {
		var select = document.createElement('select');
		var opt = document.createElement('option');
		opt.innerHTML = 'Select one';
		select.appendChild(opt);
		
		for (var i = 0; i < data.length; i++) {
			opt = document.createElement('option');
			opt.value = i;
			opt.innerHTML = data[i][0];
			
			select.appendChild(opt);
		}
		
		select.onchange = function() {
			if (this.selectedIndex > 0) {
				selected(data[this.options[this.selectedIndex].value]);
				this.parentNode.removeChild(this);
			}
		};
		
		document.body.appendChild(select);
	}
	else if (data.length == 1) {
		selected(data[0]);
	}
}

function selected(data) {
	alert(data[0]);
}

Truc du genre.

Mince, mon précédent message n'est pas passé.

Ok, je vais tester ça. Par contre la condition data.length > 1 permet de vérifier s'il y'a une réponse. N'y a t'il pas une condition pour tester le nombre d'accolades? En effet, en JSON, chaque réponse est entre accolades, par exemple {"0","NBRE","5"}. Ainsi, si j'ai plusieurs réponses, j'ai plusieurs accolades. Comment, en javascript, je peux tester le nombre d'accolades?

De plus, le select va se générer à quel endroit en utilisant ce code?

Merci d'avance

Edit: je viens de tester, j'ai une erreur de syntaxe quand je suis censé avoir une réponse multiple, le code est du "copier coller" de celui donné plus haut. :s

{"0","NBRE","5"}

C'est pas du JSON ça !

comment tu génères ton JSON ?

Fait un alert(xhr.responseText); et montres nous ce que renvoi ton php

Car mon code marche bien je l'ai testé

{"0":"TEST","CODE":"TEST","1":"NOMDETEST","CATEGORIE":"NOMDETEST","2":"NOMDETEST","EMPLACEMENT":"NOM DE TEST ","3":"","TEL":"","4":"","FAX":"","5":"","MAIL":"","6":"","ZONE":"","7":"Aucun","INFOS":"Aucun"}

Je me suis trompé sur la syntaxe mais voilà ce qui est renvoyé par mon php. Sur le formulaire toutefois, lorsque j'ai plusieurs réponses comme celle là qui se suivent, il me dit erreur de syntaxe... :s

le JSON est généré en faisant un json_encode($ARRAY), $ARRAY étant l'array de ma requete SQL ( soit mysql_fetch_array($SQL)).

Génère ton array comme j'ai fais dans l'exemple.

Et/ou fait voir ton code php

Je l'ai créé comme toi avec le mysql_fetch_assoc et le array() et ça ne marche toujours que si j'ai une simple réponse.

Ce qui m'est renvoyé en cas de réponse multiple est:

["TEST1","NOMDETEST1","NOMDETEST1","","-","-","-","-"]["TEST2","NOMDETEST2","NOMDETEST2","","-","-","-","-"]["TEST3","NOMDETEST3","NOMDETEST3","","-","-","-","-"]["TEST4","NOMDETEST4","NOMDETEST4","","-","-","-","-"]

Et toujours erreur de syntaxe... est ce que tu vois d'où peut venir l'erreur de syntaxe?

Fait voir ton PHP.

<?php
mysql_connect('Adresse IP', 'Test', 'Test');
	mysql_select_db('Base_Test');
	if(isset($_GET['info']))
	{
		$INFO = $_GET['info'];
		if($_GET['info'] != '')
		{
			$QUERY = mysql_query("SELECT * FROM TEST WHERE TESTNOM LIKE '%$INFO%' ORDER BY CODEINFO ASC");
			while($ARRAY = mysql_fetch_assoc($QUERY))
			{
			$TESTPRENOM = $ARRAY['TESTPRENOM'];
			if($TESTPRENOM == '')
			{
				$QUERY = mysql_query("SELECT * FROM TEST2 WHERE TESTNOM LIKE '%$INFO%' ORDER BY CODEINFO ASC");
				$ARRAY = mysql_fetch_assoc($QUERY);
			}
			$ARR = array(htmlspecialchars($ARRAY['TESTNOM'], ENT_QUOTES), htmlspecialchars($ARRAY['TESTPRENOM'], ENT_QUOTES), $ARRAY['CODEINFO'], $ARRAY['COORDS'], $ARRAY['COMPL1'], $ARRAY['COMPL2'], $ARRAY['COMPL3'], $ARRAY['COMPL4']);
			echo json_encode($ARR);
			}
		}
		else
		{
			$TESTNOM = '';
			$TESTPRENOM = '';
			$CODEINFO = '';
			$COORDS = '';
			$COMPL1 = '';
			$COMPL2 = '';
			$COMPL3 = '';
			$COMPL4 = '';
		}
	}
?>

<?php
$ARR = array();
mysql_connect('Adresse IP', 'Test', 'Test');
	mysql_select_db('Base_Test');
	if(isset($_GET['info']))
	{
		$INFO = mysql_real_escape_string($_GET['info']);
		if($_GET['info'] != '')
		{
			$QUERY = mysql_query("SELECT * FROM TEST WHERE TESTNOM LIKE '%$INFO%' ORDER BY CODEINFO ASC");
			
			$QUERY2 = mysql_query("SELECT * FROM TEST2 WHERE TESTNOM LIKE '%$INFO%' ORDER BY CODEINFO ASC");
			$ARRAY = mysql_fetch_assoc($QUERY2);
			
			while($ARRAY = mysql_fetch_assoc($QUERY))
			{
				$TESTPRENOM = $ARRAY['TESTPRENOM'];
				$ARR[] = array(htmlspecialchars($ARRAY['TESTNOM'], ENT_QUOTES), htmlspecialchars($ARRAY['TESTPRENOM'], ENT_QUOTES), $ARRAY['CODEINFO'], $ARRAY['COORDS'], $ARRAY['COMPL1'], $ARRAY['COMPL2'], $ARRAY['COMPL3'], $ARRAY['COMPL4']);
			}
		}
		else
		{
			$TESTNOM = '';
			$TESTPRENOM = '';
			$CODEINFO = '';
			$COORDS = '';
			$COMPL1 = '';
			$COMPL2 = '';
			$COMPL3 = '';
			$COMPL4 = '';
		}
	}
echo json_encode($ARR);
?>

PS: LES majuscules DANS LES VARIABLES C'EST MOCHE.

Ca ne marche toujours pas, le $ARRAY = mysql_fetch_assoc($QUERY2) est il vraiment utile vu que le while($ARRAY = mysql_fetch_assoc($QUERY)) réaffecte la variable $ARRAY?

J'ai toujours une erreur de syntaxe à la ligne 55 soit ma ligne de réponse

<script language='text/javascript'>
function request(callback)
		{
			var xhr = getXMLHttpRequest();
			
			xhr.onreadystatechange = function()
			{
				if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
				{
					var reponse = JSON.parse(xhr.responseText);
					var valeurs = callback(reponse);
				}
			}
			
			client = encodeURIComponent(document.getElementById('testnom').value);
	
			xhr.open("GET", "traitement.php?info=" + info, true);
			xhr.send(null);
		};

		function readData(sData)
		{
			var str = "";
			for(var p in sData) 
			{
			str+=p+' : '+sData[p]+'\n';
			}
			
			var f = document.getElementById('form');
			if(sData['TESTNOM'] != undefined)
			{
				f.client.value = sData['TESTNOM'] + ' / ' + sData['TESTPRENOM'];
				f.contact.value = sData['COORDS'];
				f.telephone.value = sData['COMPL1'];
				f.fax.value = sData['COMPL2'];
				f.mail.value = sData['COMPL3'];
				f.region.value = sData['COMPL4'];
				f.codeclient.value = sData['CODEINFO'];
				document.getElementById('TESTCODE').focus();
				document.getElementById('msg_erreur').innerHTML = '';
			}
			else
			{
				var msg = "<strong>Erreur, aucune info référencée pour <em>" + info + "</em></strong>";
				document.getElementById('msg_erreur').innerHTML = msg;
				document.getElementById('testnom').focus();
			}
		}
</script>

J'avoue que je bloque là... j'ai beau faire des modifications un peu partout rien ne marche

<?php
$arr = array();
mysql_connect('Adresse IP', 'Test', 'Test');
mysql_select_db('Base_Test');

if (isset($_GET['info']) && $_GET['info'] != '')
{
	$info = mysql_real_escape_string($_GET['info']);
	
	$query = mysql_query("SELECT * FROM test WHERE testnom LIKE '%" + $info + "%' ORDER BY test.codeinfo ASC");
	
	while($array = mysql_fetch_assoc($query))
	{
		if ($array['testprenom'] == '') {
			$query = mysql_query("SELECT * FROM test2 WHERE testnom LIKE '%" + $INFO + "%' ORDER BY codeinfo ASC");
			$array = mysql_fetch_assoc($query);
		}
		
		$nom = htmlspecialchars($array['testnom'], ENT_QUOTES);
		$prenom = htmlspecialchars($array['testprenom'], ENT_QUOTES);
		
		$arr[] = array($nom, $prenom, $array['codeinfo'], $array['coords'], $array['compl1'], $array['compl2'], $array['compl3'], $array['compl4']);
	}
}
echo json_encode($arr);
?>

function readData(data) {
	data = JSON.parse(data);
	
	if (data.length > 1) {
		var select = document.createElement('select');
		var opt = document.createElement('option');
		opt.innerHTML = 'Select one';
		select.appendChild(opt);
		
		for (var i = 0; i < data.length; i++) {
			opt = document.createElement('option');
			opt.value = i;
			opt.innerHTML = data[i][0];
			
			select.appendChild(opt);
		}
		
		select.onchange = function() {
			if (this.selectedIndex > 0) {
				selected(data[this.options[this.selectedIndex].value]);
				this.parentNode.removeChild(this);
			}
		};
		
		document.body.appendChild(select);
	}
	else if (data.length == 1) {
		selected(data[0]);
	}
}

function selected(data) {
	alert(data[0]);
}

Ca ne marche toujours pas, toujours erreur de syntaxe à la ligne 67 caractére 2 soit:

data = JSON.parse(data);

C'est donc que c'est dans ma réponse que ça plante, mais est ce que ce serait pas à cause des crochets au lieu d'accolades? En effet, ma réponse est formatée entre crochets comme : ["TABLE":"Donnee"] alors qu'avant c'était {"TABLE": "Donnee"}...

Tu es sous quel navigateur ? quelle version ?

refait voir ton alert(xhr.responseText); ET EN ENTIER !

Oups, désolé pour le temps de réponse

[["TEST","NOMDETEST","TESTCODEINFO","TESTCOORDS","TESTCOMPL1","TESTCOMPL2","TESTCOMPL3","TESTCOMPL4"],["TEST2","NOMDETEST2","TEST2CODEINFO","","-","-","-","-"]]

http://stooit.com/explorerUpload/a.htm

CQFD

function readData(data) {
	data = JSON.parse(data);
	
	if (data.length > 1) {
		var select = document.createElement('select');
		var opt = document.createElement('option');
		opt.innerHTML = 'Select one';
		select.appendChild(opt);
		
		for (var i = 0; i < data.length; i++) {
			opt = document.createElement('option');
			opt.value = i;
			opt.innerHTML = data[i][0];
			
			select.appendChild(opt);
		}
		
		select.onchange = function() {
			if (this.selectedIndex > 0) {
				selected(data[this.options[this.selectedIndex].value]);
				this.parentNode.removeChild(this);
			}
		};
		
		document.body.appendChild(select);
	}
	else if (data.length == 1) {
		selected(data[0]);
	}
}

function selected(data) {
	alert(data[0]);
}

readData('[["TEST","NOMDETEST","TESTCODEINFO","TESTCOORDS","TESTCOMPL1","TESTCOMPL2","TESTCOMPL3","TESTCOMPL4"],["TEST2","NOMDETEST2","TEST2CODEINFO","","-","-","-","-"]]');

C'est fou ça, mais ça marche pas... J'ai toujours mon erreur de syntaxe, et sur le lien que tu as mis, je n'ai rien qui s'affiche, je ne sais pas si c'est fait exprés ou pas... Bon en tout cas j'ai compris le principe et je vais essayer de trouver la solution d'ici ce soir mais j'avoue que c'est bizarre comme histoire. Je te tiens au courant, merci de ton aide en tout cas

T'as quoi comme navigateur ?

Une antiquité non ?

Rajoutes sur ta page ce fichier :
http://json.org/json2.js (En supprimant la 1ère ligne)


http://stooit.com/explorerUpload/a.htm
C'est bon là ?

Ouais là j'ai pu le voir, je suis sous IE 8 ( oui je sais... )

Je vais essayer rajouter le script de json pour voir

Edit: Bon là ça marche, et mon erreur de syntaxe vient en fait de la fonction que j'appelle pour executer le script. En fait le principe c'est que quand je passe la souris sur un bouton, il m'execute le script, pour ça je faisais un request(readData), request étant mon script de récupération et de parse de la réponse JSON et readData de remplissage des champs.

Là, étant un peu perdu, je ne sais plus ce que je dois appeler. Le readData de ma chaine JSON marche mais ça reste fixe. Quelle est la variable ou fonction à mettre dans les parenthéses du readData pour que ce soit ma réponse JSON qui soit récupérée?

Up?

Bon j'ai un autre problème, je suis arrivé à appeler mon script mais je n'arrive pas à placer mon select où je veux... il se place toujours en bas de page... Et peut on exploser une variable en javascript? Un peu comme le substr() en PHP?

Merci d'avance

"Exploser une variable" ?...

.split() ? .substring() ?

C'est ton document.body.appendChild() qui ajoute le select tout à la fin du body.

Si tu veux l'insérer avant, insère-le par exemple dans un élément placé sur ta page, prévu à cet effet, et avec un id pour le récupérer facilement en JS.

Ca marche!

Pour l'explosion de la chaine, en fait c'est bon, en faisant data[0] ça marche.

Merci pour la position du select, ça marche nickel, sujet résolu

Explique ton nouveau problème ici plutôt que par MP.

Alors,

La liste déroulante se génére, tout est ok excepté une petite chose. Le principe du script c'est que la récupération des données se fait quand je mets le curseur sur un bouton. A ce moment là, je récupére les infos en fonction de ce qui a été défini dans une zone de texte, si j'ai plusieurs données je génére la liste déroulante, sinon je préremplis directement les champs.

Le problème que j'ai c'est que quand la liste déroulante se génére, je fais un focus dessus mais je n'arrive à descendre dans la liste avec les fléches du clavier. Si j'appuie sur la fléche du bas, c'est comme si je faisais "entrée" sur la première option...

Je me demande si c'est pas parce que le select en question n'a pas d'attribut name ou d'attribut id... sauf que je ne sais pas comment créer ça. j'ai testé la commande setAttribute('name ou id','monnom'); mais ça ne marche pas

Merci d'avance.

Edit:

Je viens de rencontrer un autre problème. Quand je mets le curseur sur le bouton qui doit lancer le traitement, il ne se passe rien, il faut que j'actualise pour que ça marche, comme si la réponse était générée mais pas envoyée... Voilà le code:

function readData(data) 
			{
				data = JSON.parse(data);
				if (data.length > 1) 
				{
					var select = document.createElement('select');
					select.setAttribute('id','select_multiple');
					select.setAttribute('name', 'select_multiple');
					var opt = document.createElement('option');
					opt.innerHTML = 'Sélectionnez votre info';
					select.appendChild(opt);		
					
					for (var i = 0; i < data.length; i++) 
					{
						opt = document.createElement('option');
						opt.value = i;
						opt.innerHTML = data[i][1] + ' / ' + data[i][2];
						select.appendChild(opt);
					}					
					select.onchange = function() 
					{
						if (this.selectedIndex > 0) 
						{
							selected(data[this.options[this.selectedIndex].value]);
							this.parentNode.removeChild(this);
						}
					};
		
					document.getElementById('info_multiple').appendChild(select);
					document.getElementById('select_multiple').focus();
				}
				else if (data.length == 1) 
				{
					selected(data[0]);
				}
				else
				{
					var msg = '<strong>Pas de réponse générée pour ' + info + '</strong>';
					document.getElementById('msg_erreur').innerHTML = msg;
					document.getElementById('info').focus();
				}

			}

			function selected(data) 
			{
				var f = document.getElementById('form');
				f.info.value = data[1] + ' / ' + data[2];
				f.codeinfo.value = data[3];
				f.coords.value = data[4];
				f.compl1.value = data[5];
				f.compl2.value = data[6];
				f.compl3.value = data[7];
				f.compl4.value = data[0];
				document.getElementById('zone3').focus();
				document.getElementById('msg_erreur').innerHTML = '';
			}
			
			function verifcheckBox()
			{
				if(!document.getElementById('form').case_desactiv.checked)
				{
					var xhr = getXMLHttpRequest();
										
					client = encodeURIComponent(document.getElementById('info').value);
	
					xhr.open("GET", "traitement.php?info=" + info, true);
					xhr.send(null);
					if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
					{
						readData(xhr.responseText);
					}
				}
				else
				{
					var msg = "<strong>Saisie automatique désactivée</strong>";
					document.getElementById('msg_erreur').innerHTML = msg;
					document.getElementById('codeinfo').focus();
				}
			}

Edit 2: Réglé pour la non réponse sur le bouton traitement, c'était le xhr.onreadystatechange qui n'était pas déclarée. Il ne me reste plus qu'à savoir comment défiler avec les fléches du clavier dans la liste déroulante

Pourrait-on voir un exemple online ?

Ce script ne sera disponible que sur un réseau privé donc il ne sera pas mis online.

Sinon, pour résumer, comme mis dans l'édit du précédent post, je n'ai plus que le problème de défilement dans le select avec les fléches du clavier... Là j'avoue que je bloque

Edit: Bon ok... le problème vient de ce code

select.onchange = function()  //Lorsqu'on clique sur une option
					{
						if (this.selectedIndex > 0) //Si on est bien sur un magasin
						{
							selected(data[this.options[this.selectedIndex].value]); //On lance la fonction selected
							this.parentNode.removeChild(this); //Et on supprime la liste
						}
					};

En fait quand j'appuie sur la fléche du bas c'est comme si je cliquais sur la première option, donc ça lance le script collé plus haut... ( testé sans le morceau de code et ça marche ). Quel est l'événement qui me permettrait de changer sans valider? Le tout sans toucher à la souris ( je pensais notamment au onclick() mais ça ne marche plus avec le clavier à ce moment là...

Remplace onchange par onblur.

Tu as été plus rapide que moi Tiller, joli. Sujet résolu, il n'y a plus de problème, merci à tous.