cakephp saving data without reload page - php

Question

I have a label called price, and this label automatically updates its value every two seconds from the server. Also I have a button or link, which increases this price in database when I do click. The problem is how save the data without redirect to the same page.
My code:
<?php
echo $this->html->link('Increase price', array('controller' => 'example', 'action' => 'increase_price', $param1), array ('id' => 'btPrice'));
?>
And in ExampleController the code is
function increase_price($param1)
{
$this->autoRender = false; //Don't want a view
$example = $this->Example->findById($param1);
$example ['Example ']['price'] = $example ['Example ']['price'] + 1;
$this->Example->save($example );
}
The price is increased but cakePhp is asking me for a view, and if I do autoRender=false then my page will be blank and I want to stay on the same page.
I don't know if this is a CakePhp question or if is Jquery question. In both cases, I appreciate your help

Answer 1

if you don't wanna reload the page to do this, you need to use Ajax..since you've already got unique id for this, what you need to do is use Jquery Ajax to handle this.
first download jquery lib and put it into your app/webroot/js folder and load it
http://jquery.com/download/ download Jquery lib here
then you can do:
<script>
$( document ).ready(function() {
//do sth when click on #btPrice
$('#btPrice').click(function(){
$.ajax({
type:"POST",
//the function u wanna call
url:"<?php echo $this->webroot;?>example/increase_price/",
/* data you wanna pass, as your $param1 is serverSide variable,
you need to first assign to js variable then you can pass:
var param1 = '<?php echo $param1;?>';*/
data:{increase_price:param1},
success:function(data)
{
//update your div
}
});
});
});
</script>
Also you have to modify your increase_price function
As we are passing increse_price as parameter in ajax call and method is post, in your function, you have to use $_POST['increase_price'] to catch it then assign to another variable
eg: $param1 = $_POST['increase_price']; then you can use it..
Should do the trick for you

Answer 2

The normal flow is that when you click on a link, the browser requests a new page from the server and then renders the contents.
If you want to change something in the DOM from the client's side you need Javascript.
With the use of Javascript you can skip the complete page reload because you can request the exact information you need and then update the DOM with it. This is known as AJAX.
While you can do AJAX with plain Javascript it is usually much easier to use a Javascript framework like jQuery to make things easier.