Para usar ajax en CakePHP se necesitan las librerías prototype y scriptaculous que deben ir colocadas en app/webroot/js. Supongamos que tenemos el modelo User, el controlador users_controller.php y la vista app/views/users/display.thtml

Para usar ajax en la vista debemos cargar algunos helpers en el controlador:

// users_controller file
public $helpers = array(‘Html’, ‘Javascript’, ‘Ajax’);

El método display puede quedarse vacío:

public function display()
{
// esto está vacio
}

Ahora en la vista app/views/users/display.thtml debemos cargar los javascripts:

charsetTag(‘UTF-8′);
echo $javascript->link(‘prototype’);
echo $javascript->link(‘scriptaculous.js?load=effects’);
endif;
?>

Si se va a usar Ajax en la mayoría de las pantallas conviene cargar los JS en el layout mejor que en la vista. Como sea ahora hay que poner el div oculto con el gif:

echo ‘

‘;
echo $htm l->image(“static/loading.gif”, array(“alt”=>”Loading”));
echo ”;

image(“static/loading.gif”, array(“alt”=>”Loading”)); ?>

puedes poner el gif que prefieras. Luego (estamos en display.thtml) pintamos el div que va a recibir la respuesta del método list() y la liga ajax:

echo $ajax->div(‘qn’, array(“class”=>”pinksolid”));
echo $ajax->divEnd(‘qn’);

echo $ajax->link(
$html->image(“static/cualquierimagen.png”, array(“alt”=>”Subjects”, “title”=>”Subjects”,
style”=>”border:1px solid #fff”)),
‘/users/list’, array(“update” => “qn”,
“loading”=>”Element.show(‘loading’);”, “complete”=>”Element.hide(‘loading’);Effect.Appear(‘qn’)”),
null, false
);

Es decir que al dar click sobre la imagen se va a llamar al método list() del controlador users_controller.php y el resultado será puesto en el div “qn”, la imagen gif sólo se muestra un momento. El método list sería asi:

public function list()
{
$this->layout = ‘ajax’;
$this->set(‘data’, $this->User->findAll());
$this->render(‘listview’, ‘ajax’);
}

Y en la vista app/views/users/listview.thtml procesamos el array $data. Y eso es todo!

En la página de scriptaculous se pueden ver los efectos disponibles.

Advertisement
Comments RSS feed