AJAX en CakePHP mediante jQuery

1 junio 2009 at 7:21 pm 6 comentarios

Hace poco hemos visto cómo utilizar AJAX en un formulario con CakePHP y hemos hablado en varias ocasiones de jQuery. Ahora vamos a ver cómo utilizar jQuery a través de CakePHP.

Dean Sofer comenta en Serving up actions as AJAX with jQuery in a few simple steps (Inglés en inglés) que él no cree necesario un helper AJAX para jQuery (recordemos que el helper AJAX de CakePHP utiliza script.aculo.us) ya que un helper se utiliza para crear HTML y el javaScript debería estar lo más separado del HTML como sea posible (separación de funciones).

En este ejemplo vamos a modificar el código de nuestra aplicación de gestión de enlaces tal y como lo dejamos tras utilizar el formulario AJAX para insertar nuevos enlaces. Quitaremos todas las referencias al Helper de AJAX y le daremos la misma funcionalidad mediante jQuery.

Vamos a ver primero el controlador, explicando los cambios.

<?php
class LinksController extends AppController {

	var $name = 'Links';
	var $helpers = array('Html', 'Form', 'Javascript');
	var $components = array('RequestHandler');
	
	function add() {
		if (!empty($this->data)) {
			if ($this->Link->save($this->data)) {
				//$this->flash('Enlace añadido.','/links',3);
			}
		}
		$this->set('links', $this->Link->findAll());
		//$this->render('index', 'ajax');
		$this->render('list');
	}
	
	function index() {
		$this->set('links', $this->Link->findAll());
	}
	
}
?>
  • Eliminamos el helper de AJAX, aunque mantenemos el de JavaScript.
  • Añadimos el componente RequestHandler. Este componente identifica las peticiones vía AJAX para poder responder con el layout AJAX (por defecto vacío). Como ahora sólo vamos a hacer llamadas a add() mediante AJAX podríamos omitir este componente y realizar la llamada a la vista mediante $this->render('list','ajax'); (hemos añadido el parámetro que indica el layout a utilizar).
  • Hemos cambiado la vista a mostrar por list, que veremos a continuación.

Ahora vemos la vista principal (/app/views/links/index.ctp):

<?php
echo $javascript->link('jquery-1.3.1.min.js',false);
echo $javascript->link('jquery.form.js',false);
?>
<script type="text/javascript">
$(document).ready(function() { 
    var options = { 
        target:'#links',
		clearForm: true
    }; 
 
    $('#newLinkForm').ajaxForm(options); 
});
</script>

<h1>Enlaces disponibles</h1>
<div id="links">
<?php echo $this->element('linksList', array('links' => $links)); ?>
</div>

<h2>Añadir enlace</h2>
<?php
echo $form->create('Link', array('action' => 'add', 'id' => 'newLinkForm'));
echo $form->input('title', array('label' => 'Nombre', 'error' => __('Titulo no valido', true)));
echo $form->input('url');
echo $form->submit('Añadir',array('escape'=>false));
echo $form->end();
?>
  • Lógicamente he sustituido los links a script.aculo.us por los de jQuery. Utilizo el plugin jQuery Form Plugin que me facilita la introducción de AJAX en el formulario.
  • Añado el código JavaScript prácticamente como aparece en la página de jQuery Form Plugin. En target se le indica el div en el que se va a introducir la respuesta (en este caso el que tenga id “links”). Al final le aplicamos el método ajaxForm al formulario con id “newLinkForm”.
  • He sustituido todo el listado de links por una llamada a un elemento CakePHP pasándole unos datos ($this->element('linkslist', array('links' => $links));). Luego explicaré el por qué de este cambio.
  • La creación del formulario la hago como inicialmente mediante el helper de formularios (ya no mediante el de AJAX). Le pongo el id como parámetro.

Vamos a ver ahora el elemento al que hacíamos referencia en la vista. Lo encontraremos en /app/views/elements/linksList.ctp.

<?php foreach ($links as $link): ?>
<p>
<a href="<?php echo $link&#91;'Link'&#93;&#91;'url'&#93;; ?>"><?php echo $link&#91;'Link'&#93;&#91;'title'&#93;; ?></a></p>
<p>Añadido: <?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?></p>
<ul>
<?php foreach ($link&#91;'Comment'&#93; as $comment): ?>
<li><?php echo $comment&#91;'comment'&#93; . ' (' . $comment&#91;'created'&#93; . ')'; ?></li>
<?php endforeach; ?>
<li><?php echo $html->link('Añadir comentario', '/comments/add/' . $link['Link']['id']);?></li>
</ul>
<?php endforeach; ?>

Como podemos ver es exactamente el mismo código que teníamos en la página principal y que generaba el listado de enlaces. Lo que hemos hecho es crear un elemento de CakePHP, es decir, una porción reutilizable. Y la reutilizamos en la página principal y en la nueva vista que hemos creado para la respuesta AJAX, que sólo tiene que contener el listado. Vemos dicha vista (/app/views/links/list.ctp) a continuación:

<?php echo $this->element('linkslist', array('links' => $links)); ?>

Y con esto ya tenemos funcionando el formulario AJAX mediante jQuery.

Anuncios

Entry filed under: PHP. Tags: , , , .

¡¡Cumplimos un añito!! Descripción de iBatis: ¿Qué es?, ¿para qué sirve?

6 comentarios Add your own

  • 1. sergio  |  24 junio 2009 en 11:19 pm

    bueno, muy buen aporte

  • 2. Alejandro  |  16 septiembre 2009 en 8:28 pm

    Muchas gracias!!! Muy buen aporte me estaba volviendo loco por la incompatibilidad de prototype y jquery en cakephp.

  • 3. Miguel  |  16 septiembre 2009 en 10:15 pm

    Muchas gracias a ti por tu comentario Alejandro.

    Se agradece saber que te ha sido de ayuda.

  • 4. samu  |  8 febrero 2010 en 2:06 am

    Excelente esta noche voy a ponerlo en practica de esta manera, realmente muy bueno tu trabajo, es complicado comprender la forma de trabajar de cakephp pero sin duda es una herramienta muy poderosa

  • 5. leugim  |  3 julio 2010 en 11:31 pm

    hola interesante articulo me salio todo bien pero quiero hacer una modificacion,,,, y no me sale si me pudieras ayudar quiero …seleccionar un link,,y actualizar un en un div el listado de los comments de cada link,,,claro todo en ajax no logro q se refresque solo div ,,,me envia a otra pagina

  • 6. Alevskey (@Alevsk)  |  26 octubre 2011 en 9:20 pm

    Excelente tutorial amigo! sigue asi 🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Mi perfil

View Miguel Orbegozo's profile on LinkedIn

Feedjit

Feeds

Otros…

BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog

Bitacoras.com

Add to Technorati Favorites


A %d blogueros les gusta esto: