Can't get ajax to work in CakePHP

Question

I am trying to run an ajax request in CakePHP 2.3. I am working off of this post: simple ajax example with cakephp 2.3.0

I cant get it to work, here is my code:

$("#node-form-save").click(function(){
        event.preventDefault();
        var firstName = $("#node-form-first-name").val();
        var lastName = $("#node-form-last-name").val();
        var dob = $("#node-form-dob").val();
        $.ajax({
            url:'/persons/create',
            type: 'GET',
            datatype: 'json',
            data: {firstName: firstName, lastname: lastName, dob:dob},
            success: function(data){
                alert("succes");
                }
        });
        $('#modal-pop').jqmHide();

    })

I started with a simple test, to see if the sucess function is reached, but I get no alert. What is wrong with my code? The url is correct. The url /persons works, and when I type in /persons/create I get a CakePHP screen saying that I have no view (but I don't want one, I am doing ajax. I list my controller (PersonsController.php) below

class PersonsController extends AppController
{
public $helpers = array('html', 'form');

public function index()
{

}

public function create()
{

}
}

I left the functions blank for now, just so I can get the basic functionality working.

Answer 1

this is how i have done this.hope it helps

$(document).ready(function() {
    $(".submit").click(function(event){//my submit button has class name 'submit'
        event.preventDefault();

        $.ajax({
            type:"POST",
            url:"/cakephp/messages/create/",
            success : function(data) {
                alert('success');

            }
        });
    });
});

Controller

public function create(){
    if( $this->request->is('ajax') ) {
        $this->autoRender = false;
        echo 'hello result';
        return;
    }
  }

Answer 2

First: why "get"?? Seems uber insecure for a create function. Do the ajax call by POST instead.

You said you don't want a view, but your code nowhere specifies that. For ajax, and to avoid rendering the view and the layout, do this

public function create() {
    $this->autoRender = false;
}

Also, if you do that, you won't get anything in return, so in the action, you need to echo the values so ajax can recieve it.

And a tip, you can separate the functions you want to excecute with ajax and the normal way with a simple check

public function create() {
    if( $this->request->is('ajax') ) {
        $this->autoRender = false;
        echo 'hello result';
        return;
    }

    //else, handle this action as a normal one and render a view and whatever
}

Answer 3

You need to pass the "event" to the function:

$("#node-form-save").click(function(event){
        event.preventDefault();
        ...
}