Sometimes it is quite handy if the users of an application can simply click on some text to edit it. Adding such a feature to your application is not very difficult as you will see.

At first we have to get the Jeditable plugin (plus the JQuery library if you don’t have it already) and place it in app/webroot/js. In this folder we also create a js file which will contain the Javascript code we have to write (I will name this file example.js).

To use the Javascript files, we have to include them in the layout (or in the view, see “Referencing Javascript files” for more information):

// app/views/layouts/default.ctp
<?php echo $javascript->link(array('jquery-1.2.3', 'jquery.jeditable', 'example')); ?>

Don’t forget to add the Javascript helper to the $helpers array of your (App)Controller.

The next step is to write the “normal” functionality of the application, in this example we simply list the titles of all posts. The controller (app/controllers/posts_controller.php):

class PostsController extends AppController {

    public function index() {
        $this->set('posts', $this->Post->find('all'));
    }
}

And the view (app/views/posts/index.ctp):

<?php foreach ($posts as $post): ?>
    <div class="post" id="<?php echo $post['Post']['id']; ?>”><?php echo $post['Post']['title']; ?></div>
<?php endforeach; ?>

With that we are ready to add the edit in place functionality. Thanks to the Jeditable plugin this is an easy task: we only have to define the editable element(s), the url to which the changes should be posted, plus some parameters.

// app/webroot/js/example.js
$(function() {
    $('.post').editable('/posts/updateTitle', {
         id        : 'data[Post][id]‘,
         name      : ‘data[Post][title]‘,
         type      : ‘text’,
         cancel    : ‘Cancel’,
         submit    : ‘Save’,
         tooltip   : ‘Click to edit the title’
    });
});

I think this code is self-explanatory (if not, please leave a comment), so we can go on to implement the updateTitle action. We also add the RequestHandler component to our controller, so that the response of the updateTitle action automatically uses the ajax layout:

class PostsController extends AppController {
    public $components = array('RequestHandler');

    public function index() {
        $this->set('posts', $this->Post->find('all'));
    }

    public function updateTitle() {
        if ($this->data) {
            App::import('Core', 'sanitize');
            $title = Sanitize::clean($this->data['Post']['title']);

            $this->Post->id = $this->data['Post']['id'];
            $this->Post->saveField(’title’, $title);
            $this->set(’posttitle’, $title);
        }
    }
}

Last, but not least, we have to create a simple view for the updateTitle action (app/views/posts/update_title.ctp):

<?php echo $posttitle;?>

That’s it, our application now provides edit in place functionality. Happy baking :)