The idea is that I've 3 ajax links and each link is coupled to one single element (a form). The element will be loaded in one div. Each time when you click on a different link, the element that is requested before must be removed and the new one must come in there. So it has to update the DIV. The problem is, that it request the element, but it does not remove the other one. So when you click one the first link, it shows the first element, click on the second link and it puts the second element beneath them, and with the third one will happen exactly the same. If you clicked all the 3 links, it shows 3 forms right under each other.
Some Code:
Controller:
function view($id) {
// content could come from a database, xml, etc.
$content = array (
array($this->render(null, 'ajax', '/elements/ga')),
array($this->render(null, 'ajax', '/elements/ex')),
array($this->render(null, 'ajax', '/elements/both'))
);
$this->set('google', $content[$id][0]);
// use ajax layout
$this->render('/pages/form', 'ajax');
}
View code:
echo $ajax-link(
'Google',
array( 'controller' = 'analytics', 'action' = 'view', 0 ),
array( 'update' = 'dynamic1'));
echo ' | ';
echo $ajax-link(
'Exact',
array( 'controller' = 'analytics', 'action' = 'view', 1 ),
array( 'update' = 'dynamic1', 'loading' = 'Effect.BlindDownUp(\'dynamic1\')'));
echo ' | ';
echo $ajax-link(
'Beide',
array( 'controller' = 'analytics', 'action' = 'view', 2 ),
array( 'update' = 'dynamic1', 'loading' = 'Effect.BlindDown(\'dynamic1\')' ));
echo $ajax-div('dynamic1');
echo $google;
echo $ajax-divEnd('dynamic1');
