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 :)

In a comment, Josh Southern, pointed me to the cause of the problem: the “latest” version, 1.4, of prototype, the Javascript framework used by CakePHP, caused the problem. After replacing the prototype library with the latest version (1.5.0_rc final) provided with script.aculo.us, the example worked fine with Firefox. Thanks to Josh for the hint!

Update (2006-10-01): Corrected links.

First we create a view with an Ajax link and two divs we want to update:
<?php echo $ajax->link('Link', '/test/update', array('update' => array('first', 'second'))); ?> <div id="first"> first div </div> <div id="second"> second div </div>

The update function of the test controller is very simple, we just say it should use the ajax layout:
function update() {    $this->layout = 'ajax'; }

As last step we have to create the update view.
<?php echo $ajax->div('first'); ?> first div updated: <?php echo strtotime('now'); ?> <?php echo $ajax->divEnd('first'); ?> <?php echo $ajax->div('second'); ?> second div updated <?php echo $ajax->divEnd('second'); ?>

That’s it. If you click on the link the divs should get updated (I say “should” as it crashes for some reason my Firefox, but it works fine with Konqueror).

Update (2006-08-18): To avoid that Firefox crashes, you have to use a prototype version higher than 1.4. Thanks to Josh Southern for the hint!

What do you have to do? Put the component to your app/controllers/components directory. In your controller you have to include the component with:

var $components = array('Autocomplete');

Also make sure that you have defined the Ajax helper in your controller. I usually add it to the helpers array in my AppController (app/app_controller.php):

var $helpers = array('Html', 'Javascript', 'Ajax');

Please notice that the Ajax helper requires the Prototype and Scriptaculous Javascript libraries (they are placed in app/webroot/js). They are typically loaded in the “head” section of your layout with:

<?php
echo $javascript->link('prototype');
echo $javascript->link('scriptaculous');
?>

After that, you can add the autocompleter to your view.

<?php echo $ajax->autocomplete('Company.name'); ?>

One condition must be fullfilled to make this code snippet work: the controller which renders the view must have access to the appropriate model, in our example to the Company model.

That’s it :)

Thanks to Nate for the hint.

Update 2010-03-08: Added a paragraph about the requirement of the Prototype and Scriptaculous libraries. Thanks to Andy Potanin for the hint.

// app/controllers/components/redirect.php
class RedirectComponent extends Object
{
    var $controller;
    var $components = array('RequestHandler');

    function startup(&$controller)
    {
        $this->controller =& $controller;
    }

    function goto($url)
    {
        if ($this->RequestHandler->isAjax())
        {
            $this->controller->set('url', $url);
        }
        else
        {
            $this->controller->redirect($url);
        }
    }
}

The usage is easy. Add the component to the components array:

var $components = array('Redirect');

Afterwards you can use it in the following way:

$this->Redirect->goto('/mycontroller/myaction');

Do not forget do add the code snippet to your view which necessary to do the javascript redirect:

<?php if (isset($url)) echo $javascript->codeBlock('window.location = '.json_encode($url)); ?>

Update (2006-04-03): Small bug fixed in startup function.
Update (2009-12-05): Using json_encode to prevent a possible javascript injection problem. Thanks to pb for the hint.

<div id="login">
    <?php echo $ajax->form(array('action' => '/login'), 'post',
                                              array('update' => 'login')); ?>
    ...
    </form>
    <?php if (isset($url)) echo $javascript->codeBlock('window.location = "'.$url.'"'); ?>
</div>

And in my controller I use the following code:

if ($this->RequestHandler->isAjax())
{
    $this->set('url', '/'.$page);
}
else
{
    $this->redirect($page);
}