sending data via ajax in Cakephp

Question

i am new to cakephp and trying to send data from ajax to my controller action.. i have a popup model in which there is a input box ..i want to grab that value and send to controller without page refresh

here is my code ..

 <a  class="button anthracite-gradient" onclick="openPrompt()">submit </a>

my javascript

 function openPrompt()
{
var cancelled = true;

$.modal.prompt('Please enter a value:', function(value)
{

    $.ajax({
        type:"POST",

        url:"/cakephp/controller/action/",
        success : function(data) {
           alert(value); //value right now is in this variable ... i want to send this variable value to the controller

        },
        error : function() {
           alert("false");
        }
    });


    }, function()
   {

    });
    };
</script>

myController

 public function action(){
    if( $this->request->is('ajax') ) {
      $new = $this->request->data; 

        echo "ok"
        return;
    }
}

i want to first get the value here and then send the response to may ajax request

Answer 1

Its simple post the value to the controller and do what you want , in ajax request bind the value in data:{value_to_send:value} and get in controller

 function openPrompt()
{
var cancelled = true;

$.modal.prompt('Please enter a value:', function(value)
{

    $.ajax({
        type:"POST",
        data:{value_to_send:value}, 
        url:"/cakephp/controller/action/",
        success : function(data) {
           alert(data);// will alert "ok"

        },
        error : function() {
           alert("false");
        }
    });


    }, function()
   {

    });
    };
</script>

 public function action(){
    if( $this->request->is('ajax') ) {
     // echo $_POST['value_to_send'];
     echo   $value = $this->request->data('value_to_send');

     //or debug($this->request->data);
        echo "ok"
      die();
    }
   }

For more see accessing-post-data

Answer 2

I will give you some example. In my case, list out book list as a smart search while typing on text box.

$( ".selectBook" ).each(function(){
    $(this).keyup(function( event ) {
        var tri = $(this).val();
        var oPrnt = $(this).parents('.smartsearch');
        var str = '';
        if(tri.length > 2){
            $.ajax({
                type: "POST",
                url: "/utility/getbooks/",
                data: JSON.stringify({string: tri, activeonly:false}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                   $.each(data, function(key, val) {
                                str += '<li id="a'+key+'" term="'+val+'" data-did="'+key+'">'+val+'</li>';
                    }); 
                    oPrnt.find("ul.result").html(str);
                },
                error: function (errormessage) {
                    oPrnt.find("ul.result").html('<li><b>No Results</b></li>');
                }
            });
            oPrnt.find("ul.result").slideDown(100);
        }

    });
});

And in the controller, action (getbooks Action in UtilityController in my case)

public function getbooks($string = '', $activeonly = true){

        $this->autoRender = false;

        if( $this->request->is('ajax') ) {
            $data = $this->request->input('json_decode');
            $string = $data->string;
            $activeonly = $data->activeonly;            
        }

        $aReturn = array();
        // ... fetch books data from DB goes here...
        $aResult = $this->Book->fetch('list');
        foreach($aResult as $r){
            if(isset($r['bookname'])){
                $aReturn[$r['id']] = $r['bookname'];
            }
        }            
        return json_encode($aReturn);
    }