Using Ajax with cakephp doesnt work

Question

I have a page like this:

Basically, I pick 2 dates and hit the button, then the data below will change without refreshing this page.

Here is the code in controller:

if( $this->request->is('ajax') ) {

        $this->autoRender = false;

        //if ($this->request->isPost()) {
            print_r($this->request->data);
            // get values here 
            echo $from=( $this->request->data('start_time'));
            echo $to= $this->request->data('end_time');
            Debugger::dump($from);
            Debugger::dump($to);


        //$this->layout = 'customer-backend';
        $this->Order->recursive=-1;
        $this->Order->virtualFields['benefit']='SUM(Product.product_price - Discount.product_discount)';
        $this->Order->virtualFields['number']='COUNT(Order.order_id)';
        $option['joins'] = array(
            array('table'=>'discounts',
                'alias'=>'Discount',
                'type'=>'INNER',
                'conditions'=>array(
                    'Order.discount_id = Discount.discount_id',
                )
            ),
            array('table'=>'products',
                'alias'=>'Product',
                'type'=>'INNER',
                'conditions'=>array(
                    'Discount.product_id = Product.product_id'
                )
            )
        );
        $option['fields']= array('Discount.product_id','Product.product_name','benefit','number');
        $option['conditions']=array('Discount.start_time >='=>$from);
        $option['group'] = array('Discount.product_id','Product.product_name');
        //$option['limit']=20;
        $products = $this->Order->find('all',$option);
        //Debugger::dump($products);
        $this->set('products',$products);
    //}
    }
    else
    {
        $from='27 November 2012';
        //$this->layout = 'customer-backend';
        $this->Order->recursive=-1;
        $this->Order->virtualFields['benefit']='SUM(Product.product_price - Discount.product_discount)';
        $this->Order->virtualFields['number']='COUNT(Order.order_id)';
        $option['joins'] = array(
            array('table'=>'discounts',
                'alias'=>'Discount',
                'type'=>'INNER',
                'conditions'=>array(
                    'Order.discount_id = Discount.discount_id',
                )
            ),
            array('table'=>'products',
                'alias'=>'Product',
                'type'=>'INNER',
                'conditions'=>array(
                    'Discount.product_id = Product.product_id'
                )
            )
        );
        $option['fields']= array('Discount.product_id','Product.product_name','benefit','number');
        $option['conditions']=array('Discount.start_time >='=>$from);
        $option['group'] = array('Discount.product_id','Product.product_name');
        //$option['limit']=20;
        $products = $this->Order->find('all',$option);
        $this->set('products',$products);
    }

If the request is ajax, it gets 2 values $from and $to from the POST and pass them to the SQL query. If the request is not ajax (mean the access this page for the first time when the dates havent picked yet), $from and $to are assigned default values.

Here is my ajax in view:

<script>
$(function(){
    $('#btnSubmit').click(function() {
    var from = $('#from').val();
    var to = $('#to').val();
    alert(from+" "+to);
    $.ajax({
        url: "/project/cakephp/orders/hottest_products",
        type: 'POST',

        data: {"start_time": from, "end_time": to },
        success: function(data){
            alert("success");
        }
    });
});
});

it gets data from 2 date picker then send it to the controller as a POST method.

My problem is that after I choose 2 dates and hit the button, nothing happens. the data doesnt change according to the dates. Any thoughts about this. Thanks in advance.

Answer 1

When opening your page and running the following in the console:

$(".tab_container").html("loaded from ajax");

The products table now only shows "loaded from ajax". If the content of the products table is generated by it's own template you can have cakephp render that template only when it's an ajax call: http://book.cakephp.org/2.0/en/controllers.html

$this->render('/Path/To/ProductTable/');

If your cakephp will output only the product table when an ajax call is made you could try to run the following code:

var from = "2000-01-01";
var to = "2014-01-01";
$.ajax({
    url: "/project/cakephp/orders/hottest_products",
    type: 'POST',
    data: {"start_time": from, "end_time": to }
}).then(
  function(result){
    $(".tab_container").html(result);
  },function(){
    console.log("fail",arguments);
  }
);