filtre à l'aide d'une barre de niveau

loukili.emi
filtre à l'aide d'une barre de niveau

au niveau d'une page JSP j'affiche une liste de DIV,
Maintenant je veux filtrer dynamiquement les div à afficher à l'aide d'une barre de niveau (genre http://www.kayak.com).
je sais qu'on peut faire ça en Ajax mais je n'ai aucune piste,
en plus je veux pas récrire la Page JSP
y'a quelqu'un qui a une idée?

Niroken

Hello,

Je vois deux possibilités à ton problème :
Suposons que tu aies trois bloc de div à afficher et que tu veuilles filter de la même
manière que le site que tu as montré en exemple.

Une première possibilité consisteà faire une jsp par bloc de div que tu veux afficher:
et donc la partie HTML ressemblerait à ca :

<form name="view_choice" action="/view_controller">
	<input type="radio" name="view_criteria" value="une_page_1" onChange="javascript:submit_form('view_choice');">une_page_1</input>
	<input type="radio" name="view_criteria" value="une_page_2" onChange="javascript:submit_form('view_choice');"/>une_page_2</input>
	<input type="radio" name="view_criteria" value="une_page_3 onChange="javascript:submit_form('view_choice');"">une_page_3</input>
</form>

<script langage="javascript">
	function submit_form(form_name) {
		document.forms[form_name].submit();
		return true;
	}
</script>

Ensuite dans ta servlet il te suffira de rediriger correctement sur la jsp qui
va bien en fonction de la valeur du input radio envoyé.

Une seconde possibilité consisterait à envoyer la jsp avec tes trois blocs et à les cacher
en fonction de ce sur quoi clique l'utilisateur, le code ressemblerait donc à ca:

<input type="radio" name="view_criteria" value="une_page_1" onChange="javascript:display_bloc({'bloc_1'});hide_bloc({'bloc_2','bloc_3'});">une_page_1</input>
<input type="radio" name="view_criteria" value="une_page_2" onChange="javascript:display_bloc({'bloc_2'});hide_bloc({'bloc_1','bloc_3'});">une_page_2</input>
<input type="radio" name="view_criteria" value="une_page_3 onChange="javascript:display_bloc({'bloc_3'});hide_bloc({'bloc_1','bloc_2'});">une_page_3</input>

<div id="bloc_1">
	//contenu bloc 1
</div>

<div id="bloc_2">
	//contenu bloc 2
</div>

<div id="bloc_3">
	//contenu bloc 3
</div>

<script langage="javascript">
	function display_bloc(blocs_id) {
		var i;
		for (i = 0; i < blocs_id.length; i++) {
			document.getElementById(blocs_id[i]).display = true;
		}
	}
	
	function hide_bloc(blocs_id) {
		var i;
		for (i = 0; i < blocs_id.length; i++) {
			document.getElementById(blocs_id[i]).display = false;
		}
	}
</script>

J'émet une réserve quand quand à l'exactitude de la syntaxe de ces morceaux de code,
je n'ai pas testé.

En ce qui concerne l'ajax dans ce cas de figure, cela me semble bien lourd pour remonter
trois blocs de présentation HTML qui à priori sont statiques, c'est pourquoi je n'ai pas
évoqué cette option ici.

Quand aux deux solutions possibles que j'ai mentionné, à choisir je prendrais la première:)

Bonne chance,
Niroken

hajimeg

Salut,

Si j'ai bien compris ce que tu veux faire, tu n'as pas besoin d'AJAX, qui lui est utile pour faire des appel à la BD en dynamique.
Pour ton problème, il te suffit d'utiliser un attribut "personnalisé" dans tes DIV, et de les utiliser par la suite dans une boucle javascript.
Teste cet exemple, tu comprendras facilement la fonction Filter :

<html>
<head>
	<style>
	.divBorderFloat {
		width:100px; 
		height:100px; 
		border:1px solid;
		float: left;
	}
	</style>

	<script language="javascript">
		function filter(val) {
		    var m = document.getElementsByTagName("DIV");

		    for (i=0; i<m.length; i++) {
				if (m.item(i).getAttribute("filter") != val) {
					m.item(i).style.display="none";
				} else {
					m.item(i).style.display="block";
				}
			}
		}
	</script>
</head>
<body style="font-size:10px">
	<button onclick="javascript:filter(1)">FILTRE 1</button>	
	<button onclick="javascript:filter(2)">FILTRE 2</button>	
	<button onclick="javascript:filter(3)">FILTRE 3</button>	

	<div class="divBorderFloat" filter="1">FILTRE = 1</div>
	<div class="divBorderFloat" filter="2">FILTRE = 2</div>
	<div class="divBorderFloat" filter="3">FILTRE = 3</div>
	<div class="divBorderFloat" filter="3">FILTRE = 3</div>
	<div class="divBorderFloat" filter="2">FILTRE = 2</div>
	<div class="divBorderFloat" filter="3">FILTRE = 3</div>
	<div class="divBorderFloat" filter="1">FILTRE = 1</div>
	<div class="divBorderFloat" filter="2">FILTRE = 2</div>
</body>
</html>

A plus ...

Patrice