Filtre dynamique AJAX sans rechargement
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:
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:
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:
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:
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 !
