Tutorial - CakePHP Ajax "Quick Save" with jQuery: CakePHP, jQuery

When you are in an administration panel, sometimes you want a "quick save" feature that allows you to save without leaving the page.  Here is how to accomplish this with CakePHP and jQuery.

To start, download jQuery and the jQuery Form Plugin JavaScript.  Include them in your view with the JavaScript helper:

$javascript->link(array('jquery', 'form'), false);

PHP:

$javascript->link(array('jquery', 'form'), false);

Include the RequestHandler in your controller detect an Ajax save attempt.  Also include the JavaScript helper if you haven't already.

var $helpers = array('Javascript');
var $components = array('RequestHandler');

PHP:

var $helpers = array('Javascript');
var $components = array('RequestHandler');

Next we want to override our save function with the ajax quick save.  Put this right before your $this->Model->save($this->data) in your save action.

if ($this->RequestHandler->isAjax()) {
	if ($this->Article->save($this->data)) {
		echo 'success';
	}
	Configure::write('debug', 0);
	$this->autoRender = false;
	exit();
}

PHP:

if ($this->RequestHandler->isAjax()) {
    if ($this->Article->save($this->data)) {
        echo 'success';
    }
    Configure::write('debug', 0);
    $this->autoRender = false;
    exit();
}

This detects if the request is ajax, then saves the data.  Then it sends back a simple, "success" message to let you know things went fine.  It also writes debug to 0 and doesn't render anything, then exits.

Lastly, lets create and include a JavaScript file that performs the quick save.

jQuery(function($){
 	$('')
 		.click(function(){
 			$(this).parents("form:first").ajaxSubmit({
 				success: function(responseText, responseCode) {
 					$('#ajax-save-message').hide().html(responseText).fadeIn();
 					setTimeout(function(){ 
 						$('#ajax-save-message').fadeOut(); 
 					}, 5000);
 				}
 			});
 			return false;
 		})
 		.appendTo('form div.submit'); 
});

JavaScript:

jQuery(function($){
    $('<input type="button" value="Quick Save" />')
        .click(function(){
            $(this).parents("form:first").ajaxSubmit({
                success: function(responseText, responseCode) {
                    $('#ajax-save-message').hide().html(responseText).fadeIn();
                    setTimeout(function(){ 
                        $('#ajax-save-message').fadeOut(); 
                    }, 5000);
                }
            });
            return false;
        })
        .appendTo('form div.submit'); 
});

This adds a button called, "Quick Save" to each form on the page where a div with class="submit" exists (you may want to switch this to the id of the form you want to add quick save to). Then It also attaches a click event to the button that submits the form via the jQuery Form Plugin.

In a few simple steps, we've created a quick save feature that saves your data whenever you want without leaving the page.