[RESOLU] Liste lièe AJAX sans Bdd

21 août 2012, 14:52

Salutation à vous,

Je souhaite avoir une liste lier sans Bdd.

Je m'explique, je compte faire un système d'annonce sur mon site, et pour faciliter aux utilisateurs leur choix, et éviter un tas de boutons, j'ai penser faire un pré formulaire avec une liste liée.

Dans le premier il y a je vend, j’achète, et dans le deuxième qui apparait en fonction du choix, la liste des options disponible dans la catégorie souhaité.

J'ai déjà utiliser un système simple mais j'ai un soucis dans l'affichage. En effet, il est conçu pour fonctionner avec une Bdd, et dans mon cas j'en est pas besoin étant donnée que j'ai qu'une dizaine d'options en tout et pour tout.
(Je me souviens en avoir déjà fait une, mais je ne retrouve pas les sources)

Voici les scripts actuellement:
index.php

			 				<select id="region" name="select_id" size="2" class="ajaxList" data-url="option.php" data-target="option">
<?php
$count=count($select['id']);
for($i=0;$i<count($select['id']);$i++):
   $id = $select['id'][$i];
   $name = $select['name'][$i];
?>
			 				<option value="<?= $id ?>" <?= $region_id == $id ? ' selected' : ''; ?>>
			 					<?= $name; ?>
			 				</option>
<?php
endfor;

?>
			              	</select>

option.php (il faut que ça retourne que les options pourtant le même id, que celui choissit)

<?php
$option = array(
	'error' => false,
	'results' => array(
		array(
			'id' => 1,
			'name' => 'Voiture 1'
		),
		array(
			'id' => 2,
			'name' => 'Voiture 2'
		),
		array(
			'id' => 22,
			'name' => 'Voiture 22'
		)
	)
);
die(json_encode($option));
?>

add.js (à voir si il faut pas le modifier, sans trop le toucher, car il se peux qu’ailleurs j'ai besoin de lister des données de Bdd)
[javascript]
(function($){
$('.ajaxList').change(function(event){
var select = $(this);
var id = '#'+select.data('target');
$.get(select.data('url'), {id:select.val()}, function(data){
if(data.error){
alert(data.error);
}else{
$(id).parents('.control-group').show();
var target = $(id).get(0);
target.options.length = 0;
for(var i in data.results){
var result = data.results;
target.options = new Option(result.name, result.id, false, false);
}
}
},'json');
}).each(function(){
var select = $(this);
var target = $('#'+select.data('target'));
target.parents('.control-group').hide();
});

})(jQuery);
[/javascript]

Si jamais vous avez un autre système je prend aussi.

Mais si je peux optimiser celui ci, ça m'arrangerais.

Je vous remercie

Cordialement

21 août 2012, 23:08

Bonjour j'ai réécrit un exemple semblable au tiens et ça marche le remplissage de la liste liée à partir d'un tableau json comme base de données source.

L'exemple contient 2 fichiers:
- le formulaire html/ajax qui présente les listes liées nommé : listeAjax.php
- et le script php qui fournie les données de la liste liée à partir d'un tableau selon un id reçu par $_GET. ce fichier est nommé : getListOptions.php

Voici leurs contenus:

listeAjax.php

<!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" dir="ltr" lang="fr" xml:lang="fr">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Listes liées par AJAX</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
	$('#liste1').change(function(event){ 
		var select = $(this);
		var id = '#'+select.data('target');
		$.get(select.data('url'), {id:select.val()}, function(data){
			//init target liste
			var target = $(id).get(0);
			target.options.length = 0;
                        $(id).hide();
			//
			if(data.error!=false){
				alert(data.error);
			}else{
				//remplir target liste
				for(var i in data.results){
					var result = data.results[i];
					target.options[i] = new Option(result.name, result.id, false, false);
				}
                                $(id).show();
			}
		},'json');
	});
});
</script>
<style>
.liste {
	width:100%;
	color:blue;
}
</style>
<body>
<select id="liste1" name="liste1" size="5" class="liste" data-url="getListOptions.php" data-target="liste2">
	<option></option><option>1</option><option>2</option><option>3</option>
</select>
<select id="liste2" name="liste2" size="5" class="liste" style="display:none">
	<option></option>
</select>
</body>
</html>

getListOptions.php

<?php
# base de donnees 
$baseDonnees = array(
	#id=>liste des voitures
	1=> array(
			array(
				'id' => 11,
				'name' => 'Voiture 1.1'
			),
			array(
				'id' => 12,
				'name' => 'Voiture 1.2'
			),
			array(
				'id' => 13,
				'name' => 'Voiture 1.3'
			)
	),
	2=> array(
			array(
				'id' => 21,
				'name' => 'Voiture 2.1'
			),
			array(
				'id' => 22,
				'name' => 'Voiture 2.2'
			),
			array(
				'id' => 23,
				'name' => 'Voiture 2.3'
			)
	),
	3=> array(
			array(
				'id' => 31,
				'name' => 'Voiture 3.1'
			),
			array(
				'id' => 32,
				'name' => 'Voiture 3.2'
			),
			array(
				'id' => 33,
				'name' => 'Voiture 3.3'
			)
	)
);	
# elements options de liste html a retourner par json si $id existe dans la base de donnees
$id = isset($_GET['id'])?$_GET['id']:null;
$options = array(
	'error' => isset($baseDonnees[$id])?false:'ID inconnu!',
	'results' => isset($baseDonnees[$id])?$baseDonnees[$id]:array()
);
echo(json_encode($options));
?>

21 août 2012, 23:35

J'ai compris

En fait il me manquer le premier ID.

En mettant ton scirpt, j'affiche tout aussi bien les tableau récupérer des Bdd que celle du tableau JSON

Merci pour ton aide

Cordialement

[RESOLU] Liste lièe AJAX sans Bdd

Qui est en ligne