As i Searched Through tutorials and Cakephp Cook Book. The best uproach i reached is this:
First: The thing that was preventing the aJax to do the Search was the Security Component. Since Forms in cakephp generate a unique token. Each time it is submited should be a different one so since i was using ajax it was generating error. so i disabled
public function beforeFilter() {
parent::beforeFilter();
// Controller spesific beforeFilter
$this->Auth->allow('search');
if ($this->action == 'search') {
$this->Security->validatePost = false;
$this->Security->csrfCheck = false;
if (!$this->RequestHandler->isAjax()) {
$this->Security->blackHole($this, 'You are not authorized to process this request!');
$this->redirect(null, 401, true);
}
}
}
Then i used the query(); method of cakephp since my query was complex and it used Joins and Conditions as well. So the search() function is as follow.
app/Controllers/ControllerName
/**
* aJax search method
*
* @return void
*/
public function search() {
$this->autoRender = false;
if ($this->request->is('post')) {
if(!empty($this->data)){
if ($this->request->is('ajax')) {
/* Query for the Typology*/
$queryTypologies =" SELECT *";
$queryTypologies .=" FROM typologies AS Typology";
$queryTypologies .=" LEFT JOIN items as Item";
$queryTypologies .=" ON Item.id = Typology.item_id";
$queryTypologies .=" WHERE Item.published=1 AND Typology.published=1";
if (isset($this->data['Typology']['typology_categories']) && !empty($this->data['Typology']['typology_categories']) && $this->data['Typology']['typology_categories']!='') {
$queryTypologies .= " AND Typology.typology_category_id ='".$this->request->data['Typology']['typology_categories']."'";
}
if (trim($this->data['Typology']['item_locations'])!='' && !empty($this->data['Typology']['item_locations']) && $this->request->data['Typology']['item_locations']!='') {
$queryTypologies .= " AND Typology.item_id=(SELECT id FROM items AS Item WHERE Item.item_location_id='".$this->request->data['Typology']['item_locations']."' LIMIT 1)";
}
if (trim($this->request->data['Typology']['typology_price'])!='' && !empty($this->request->data['Typology']['typology_price']) && $this->request->data['Typology']['typology_price']!='') {
if (trim($this->request->data['Typology']['typology_price']) == 1) {
$queryTypologies .= " AND Typology.price <= 1000";
}
if (trim($this->request->data['Typology']['typology_price']) == 2) {
$queryTypologies .= " AND Typology.price BETWEEN 1001 AND 5000";
}
if (trim($this->request->data['Typology']['typology_price']) == 3) {
$queryTypologies .= " AND Typology.price BETWEEN 5001 AND 50000";
}
if (trim($this->request->data['Typology']['typology_price']) == 4) {
$queryTypologies .= " AND Typology.price BETWEEN 50001 AND 100000";
}
if (trim($this->request->data['Typology']['typology_price']) == 5) {
$queryTypologies .= " AND Typology.price BETWEEN 100001 AND 500000";
}
if (trim($this->request->data['Typology']['typology_price']) == 6) {
$queryTypologies .= " AND Typology.price BETWEEN 500001 AND 1000000";
}
if (trim($this->request->data['Typology']['typology_price']) == 7) {
$queryTypologies .= " AND Typology.price > 1000000";
}
}
if (trim($this->data['Typology']['typology_conditions'])!='' && !empty($this->data['Typology']['typology_conditions']) && $this->data['Typology']['typology_conditions']!='') {
$queryTypologies .= " AND Typology.typology_condition_id='".$this->request->data['Typology']['typology_conditions']."'";
}
$queryTypologies .=" ORDER BY Typology.id DESC";
$typologies = $this->Typology->query($queryTypologies);
$this->set('typologies', $typologies);
/* debug($this->data); // This is used for development purposes ONLY! */
if($this->RequestHandler->isAjax()){
$this->render('search', 'ajax');
}
}
}
}
}
And in the View i used this Ajax:
<!-- HERE IS THE SEARCH FILTER -->
<script type="text/javascript" >
//<![CDATA[
$(document).ready(function () {
$('.select_filter').bind('change keyup input',function(event) {
$('html,body').animate({ scrollTop: $("#work").offset().top}, "slow");
var formData = $('#search_form').serialize();
$.ajax({
async:true,
data: formData, // You will get all the select data..
dataType:'html',
success:function(data){
$("#projects").html(data);
},
type: 'POST',
url:'<?php echo Router::Url(array('controller' => 'typologies','admin' => false, 'action' => 'search'), true); ?>'
});
event.preventDefault();
return false;
});
});
//]]>
</script>
This worked as charm for me. Feel free to use it. i hope it would be handy for anyone.