Discussion :

[mirrix]

Bonjour a tous,

Pour un projet je dois réaliser un filtre dynamique qui permettra de modifier une div de ma page selon les critères choisis. Une fois un critère choisi, une recherche dans la base de données est effectué et les post correspondant au critère devront etre affiché dans la div prévu pour l'affichage des post.

Je developpe en MVC, du coup sur ma vue ou sont affichés mes posts je les affiches comme ceci :

Code php :

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

1
2
3
4
5
6
<?php foreach ($post as $k => $v): ?>
<div class="titre"><?php echo $v->title; ?></div>
<div class="localisation"></div><?php echo $v->location; ?></div>
<div class="text_red"><?php echo substr($v->content,0,210).' ...'; ?></div>
<div class="contenu"><?php echo $v->content; ?></div>
<?php endforeach ?>

Le tableau post (qui sert dans le foreach) est realisé dans le controller comme ceci :

Code php :

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

1
2
3
4
5
6
<?php
$condition = array('online' => 1); // affichage de tout les posts
$d['posts']  = $this->Post->find(array( //tableau contenant chaque post en ligne (sera utilisé dans le foreach)
'conditions' => $condition,
));
?>

Voila en gros comment fonctionne ma page.

Voila ou est mon problème :

Prenons l'exemple si je sélectionne comme critère une date correspondant au post :

J'ai ceci dans mon filtre :

Code html :

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

1
2
3
4
5
6
7
// Code du formulaire :
<div class="date">
<label> Date : </label>
<form id="formulaire_filtre" action="<?php echo Router::webroot('file/code.php'); ?>" method="post">
<input type="text" MAXLENGTH="20" name="datepicker" id="datepicker" /> 
</form>
</div>

Lorsque je modifie la date, elle est envoyé à la page code.php pour ne selectionner que les posts correspondants a cette date.

Voila mon 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
$('#datepicker').change(function(){
$('.partieD').html(''); // classe de la div ou sont les posts
 
//on envoie la valeur recherché en GET au fichier de traitement
$.ajax({
url : $('#formulaire_filtre').attr('action') ,
type : $('#formulaire_filtre').attr('method'),
data : $('#formulaire_filtre').serialize(), 
dataType: 'json',
success : function(json){ 
$.each(json, function(i, post){
$('.partieD').append(post.title+' ');
$('.partieD').append(post.content+' ');
});
}
});
return false;
});

J'arrive donc bien a récupérer toute mes valeurs mais comment les réinjecter dans ma vue pour que je puisse les utiliser dans mes différentes fonction ?

En gros ce que je veux faire c'est un filtre comme sur les site immobilier genre seloger.com

Merci d'avance a tous !

[Mell]

Donc ton ajax envois ta date à ton php, et ton php filtre à l'aide d'une requête les données en base pour ne récupérer que celles dont tu as besoin.

Je pense que le mieux après ça serait que dans ton php, tu mettes en places tes données filtrées et que tu retournes le HTML.

Comme ça après dans ta fonction ajax tu as juste à affecter ton HTML à ta div que tu veux modifier.

Après ce n'est que mon avis, mais je pense que c'est comme ça que je ferais. Je ne sais pas si c'est très clair..

[mirrix]

C'est ce que j'ai fini par faire, ca marche bien mais je me demande si c'est la meilleur solution ou la plus propre ?!

[mirrix]

Ah et aussi, comment je pourrais supprimer des critères précédemment ajouté.

Par exemple je tri en sélectionnant une date, après les résultats je les tri en sélectionnant par couleur.
Finalement je ne veux plus trier par date alors je supprime ce critère en appuyant sur le bouton correspondant, comment je peux faire ça ?

[SpaceFrog]

j'ai déja propose un script pour ça je sais plsu ou ...
suffit de faire un filter()

[danielhagnoul]

j'ai déja propose un script pour ça je sais plsu ou ...
suffit de faire un filter()

Comment puis-je filtrer dynamiquement une table ?

[SpaceFrog]

Daniel

[mirrix]

Je vois pas trop en quoi ça peut m'aider dans le lien.

Car j'arrive à faire une requête qui se modifie en fonction des champs du formulaire de recherche qui sont remplis.

Ce que je veux faire c'est quand je tri par date avoir une petite image qui se met au dessus du formulaire. Enfin quand je veux supprimer le critère date du tri, je veux cliquer sur la croix de l'image pour supprimer le critère de date et recharger automatiquement les nouveaux postes triés.

C'est un peu comme dans n'importe quelle formulaire de tri des sites à navigation par facette.

[Mell]

baah dans ces cas là, il faut que tu r'envois à ta requête les nouveaux paramètres..
Admettons tu as choisi couleur et date, si tu cliques sur la croix, tu n'enverras plus que couleur et date sera vide..

Ce n'est pas trop compliqué à mettre en place.