Using Ajax with cakephp doesnt work

Question

I have a page like this: enter image description here

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.

Your URL seems way off - have you verified it's actually hitting the right action? If so, what does it display? Have you tried looking at the "Network" tab in Chrome's Developer Tools (or similar)? — Dave
– Dave, Commented Dec 3, 2013 at 2:03
@Dave when I hit the button, it sent a POST request to the server, containing 2 values. I used firebug in Firefox. <code>POST hottest_products 200 OK </code> — Tung Pham
– Tung Pham, Commented Dec 3, 2013 at 2:10
it returned nothing. except the POST request. Nothing changed. You can check it here cmpt470.csil.sfu.ca:8019/project/cakephp/orders/… Account is: [email protected] and pass is 123456. After login, please access the link above again. — Tung Pham
– Tung Pham, Commented Dec 3, 2013 at 2:14
@Dave I'm not sure this code is right or not $option['conditions']=array('Discount.start_time >='=>$from); But by passing the $from = '27 November 2012', it should show some data. It worked on mysql, but doesnt work here. — Tung Pham
– Tung Pham, Commented Dec 3, 2013 at 2:25

HMR · Accepted Answer · 2013-12-03 05:30:14Z

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);
  }
);

edited Dec 3, 2013 at 5:30

answered Dec 3, 2013 at 4:52

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tung Pham Over a year ago

so you mean I need to format the data in JSON or text/html? Normally, the hottest_product page send a POST request to the controller. The controller use that data to execute a select query to retrieve data from database and then send it back to the page to show the data.

HMR Over a year ago

@TungPham You can use JSON, XML, DOM or just text to return as long as the JavaScript does something with it. If you return a DOM part you can just replace the innerHTML of something with the newly returned part. If the table of products is in it's own template then you can render that and have JS set the innerHTML of the container of that table with the returned html. I assumed you wanted to use JSON but html would be easier to implement.

Tung Pham Over a year ago

I just want to use something simple, as long as I can make it work.

HMR Over a year ago

At the page: cmpt470.csil.sfu.ca:8019/project/cakephp/orders/… is the code contained in the div with class tab_container generated by it's own template? If so you can have cakephp return only the table and then set the innerHTML with the returned content: $(".tab_container").html(response);

Tung Pham Over a year ago

The whole code is in <div class="control-group">, but I think it's not a problem as the POST method returned something like: Array ( [start_time] => 02 December 2013 [end_time] => 08 December 2013 ) <pre>'2013-12-02'</pre><pre>'2013-12-08'</pre> And from Cakephp you can access to POST method by using $this->request->data('name_of_variable');

|

Collectives™ on Stack Overflow

Using Ajax with cakephp doesnt work

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related