Hello les INpactiens !

Je suis en train de développer un site web pour une petite agence immobilière, et je rencontre des difficultés de conception.

Je voudrais afficher une liste des biens disponibles à la location (ça, ça marche sans souci) et pouvoir les filtrer à la volée (donc sans rechargement de page) en fonction de leur catégorie (Appartement, Maison, ...), de leur nombre de pièces, de la surface, etc. J'ai donc positionné une section exprès dans ma page avec les éléments de formulaire nécessaires (checkbox, etc) sauf que je galère à gérer la partie JavaScript.

Dans l'idée, je voudrais partir sur quelque chose du style :

$(document).ready(function() {
	// Gestion de la checkbox catégorie Appartement
	$('#chk_apt').change(function() {
		$("[data-categorie=Appartement]").toggle(300);
		...
	});
});

Sauf que bon, quand j'ai un seul filtre, ça va... quand j'en ai plusieurs, bah ça commence à se corser ... 🤩

Comment est-ce que vous feriez ça vous ?

 

Plusieurs solutions bien sûr:

• Par convention de nommage: changer l'id de #chk_apt à #chk_Appartement et enlever #chk_ du $(this).Id()
• Par data-attributes sur les checkbox: ajouter des balises data-togglefilter="Appartement" sur les checkbox et dans le gestionnaire d'évènement, le récupérer par $(this).data("togglefilter")

Merci pour ta réponse 🙂 

J'ai vu qu'avec Django il y avait django_rest_framework qui permettait de faire un peu ce genre de choses avec AJAX : https://djangopy.org/learn/dynamically-filter-queryset-with-ajax-and-drf/

Ça m'a l'air de correspondre à ce que je veux.