Recently I had a need for an “in-place-update” of some fields on a CakePHP project that used jQuery. I found a lot of articles, examples and helpers that ironically didn’t help as much as I would like them to do, so I decided to write myself a new one.

I found a great example, but it only worked if you wished to edit items in displayed in a list-style or table-style structure, and I needed to basically have a standard CakePHP view view (yes a view view that corresponds to a view action in the controller), on which I can edit the Post title or description without going to the edit view.

A few slight modifications of the provided example, and voilà, I have created a CakePHP plugin for “in place update”. You can download it from github:

CakePHP in place updater plugin

Installation and usage

Extract the plugin

Extract the contents of the pack to the app/plugins/inplace_updater folder.

Add helper to your controller

Include the inplace_updater helper in your controller or app controller like so:

var $helpers = array(... 'InplaceUpdater.InplaceUpdater' ...);

Download and include Jeditable jQuery plugin to your layout

In order for this plugin to work, you will need to include the contents of the Jeditable jQuery plugin. Probably the simplest solution is to save the minified version (jquery.jeditable.mini.js) to your js folder, so the location of the file is “app\webroot\js\jquery.jeditable.mini.js”.

Jeditable jQuery plugin is a plugin for jQuery, so oviously it cannot be run without jQuery. Download the latest jQuery and copy it to “app\webroot\js\jquery.js”.

To include the required javascripts, add the following lines to your layout file (usually app\views\layouts\default.ctp):

<?php
    echo $javascript->link('jquery');
    echo $javascript->link('jquery.jeditable.mini');
?>

Add an in-place-updater control to your view

The updater helper allows you to add an “input” control to your views that will behave like the a div element (by default, or any other HTML element if you wish) on your view until you click/double-click/hover/etc on it, then it will appear as a text input, or a drop-down list, or any element supported by Jeditable jQuery plugin

<?php
echo $inplaceUpdater->input
(
    'Post',
    'title',
    $post['Post']['id'],
    array
    (
        'value'         => $post['Post']['title'],
        'actionName'    => 'inPlaceUpdate',
        'type'          => 'text',
        'cancelText'    => 'Cancel',
        'submitText'    => 'Save',
        'toolTip'       => 'Click to edit Post Title',
        'containerType' => 'h2',
    )
);
?>

Add an action handler in your controller

When the save button is pressed after modifying the in-place-edit element, a post is made to the inPlaceUpdate (by default) controller action. You can add a function like this to handle the in-place-update action.

function inPlaceUpdate($id = null)
{
    if (!$id)
        return;

    if ($this->data)
    {
        // get all the fields with its values (there should be only one, but anyway...)
        foreach($this->data['Post'] as $field => $value)
        {
            // check if the provided field name is acceptable
            switch($field)
            {
                case 'title':
                case 'description':
                    break;
                default:
                    $this->set('updated_value', '');
                    return;
            }

            $this->Post->id = $id;
            $this->Post->saveField($field, $value);

            $this->set('updated_value', $value);
        }
    }
}

Since you have a new action in your controller which is used for the in-place-update functionality, you will need to add the in_place_update view to your model’s views folder. And that view should display the updated result after save.

<?php
	echo $updated_value;
?>