Cake PHP Tutorial

Read The Full Tutorial.

In this article we learn how to get AJAX and cake to work together without having to comb cake's manual.We will need two things:

1- to have cake installed and running.
2- to get the scriptaculous and prototype libraries.

Here is the code:

<?php
print $html->charsetTag('UTF-8');
print $javascript->link('prototype');
print $javascript->link('scriptaculous.js?loadïfects');
?>

In your controller's action, you want to add:

// controller file
var $helpers = array('Html', 'Javascript', 'Ajax');
 
function view() {
    $this->render('layout file', 'ajax');
}

Now you will need to create a link, but not just any link. You need to enable an ajax link, and to do that you use the ajax helper that comes with cake, This will automatically generate a link with the appropriate attributes to output the ajax into the div you specify.

// view file
echo $ajax->link('link text', '/controller/action',
                 array('update' => 'div id')
                );

To add image, you simply include the html for the image in place of the first parameter like this:

echo $ajax->link('<img src="/img/button.gif" border="0"/>',
                 '/controller/action/',
                 array('update' => 'div id'),
                 null,
                 FALSE
                );

To update more than one div at a time, you'll need to add an array of divs to update, and also use the $ajax helper to create the divs.

echo $ajax->link('link text', 'controller/action',
                 array('update' => array('div1', 'div2'))
                );
 
// create the div code rather than hard-coding <div id='div1'>
echo $ajax->div('div1');
echo $ajax->divEnd('div1');
 
echo $ajax->div('div2');
echo $ajax->divEnd('div2');

To add effects, you'll need to add the effect to the link:

$ajax->link('link text', 'controller/action',
            array('update' => 'div id',
                  'loaded' => 'scriptaculous effect')
           );