AJAX en CakePHP mediante jQuery

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 ( 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.

Entender jQuery. Principios básicos

Una de las maneras, quizás la más utilizada, de emplear jQuery es siguiendo los ejemplos del plugin que queramos utilizar, como hice en este mismo blog en «Utilización de jQuery cycle plugin«.

Pero si queremos entender cómo funciona jQuery o intentar hacer nuestro propio plugin necesitamos ir más allá. Eso es lo que intenta esta entrada.

jQuery es un framework javascript especializado principalmente en la localización y modificación de elementos en el árbol DOM (Document Object Model). También es importante su gestión de eventos y la facilidad para el desarrollo de plugins.

Un uso frecuente de jQuery sería:

1. Reaccionar a un evento llamando a una función.
2. En dicha función localizar un objeto del árbol DOM.
3. Modificar dicho objeto.

Podemos reaccionar a un evento del tipo de pulsado de un enlace, paso del ratón sobre algo o envío de un formulario entre otros. Podemos consultar el API de eventos de jQuery para velos todos.

Un evento un tanto especial es el que indica que el árbol DOM está listo para recorrerse. Este evento es el que se suele utilizar para dar entrada a todo el código jQuery, por lo que solemos ver que siempre ponemos nuestro código jQuery dentro de $(document).ready():

$(document).ready(function(){
  //Nuestro codigo aqui
});

Para buscar dentro del árbol DOM, jQuery utiliza una nomenclatura de selectores muy similar a CSS, por lo que si conocemos CSS nos resultará bastante familiar. Ejemplos de selectores serían:

• $("#id") que devuelve el elemento de identificador «id».
• $("p") que devolverá todos los párrafos
• $("p.class") que devuelve los párrafos con la clase «class»

Podemos ver todos los selectores en la documentación de jQuery sobre selectores.

Vemos que estamos utilizando en varias ocasiones la función $(), que es la llamada función jQuery. Podemos señalar que la función jQuery siempre nos devuelve un objeto jQuery, que contiene un array con todos los resultados. Realmente tambiéń la mayoría de eventos y otras funciones de jQuery devuelven el objeto jQuery (lo que se conoce por Interface Fluida), por lo que es muy común enlazar unas llamadas con otras tal y como veremos en el ejemplo que acompaña a esta entrada.

Por último vamos a conocer las funciones de manipulación del árbol DOM. Con estas funciones podemos por ejemplo: añadir una clase a una etiqueta HTML o agregar contenido dentro de un elemento. Podemos ver todos ellos en el API de atributos y en el API de manipulación.

Finalmente y para aclarar los conceptos vamos a ver un pequeño ejemplo. Nos vamos a basar en la siguiente página HTML:

<html>
<head>
    <style type="text/css">
        p.red { background: red; }
	p.yellow { background: yellow; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
	//Aqui nuestro codigo jQuery
   </script>
</head>
<p class="color">Este es un párrafo</p>
<p>Este es otro párrafo</p>
<p class="color">Y este el último párrafo</p>
<ul>
<li><a id="redLink" href="#">red</a></li>
<li><a id="yellowLink" href="#">yellow</a></li>
<li><a id="resetLink" href="#">reset</a></li>
</ul>
<body>
</body>
</html>

Como vemos son tres párrafos de los cuales dos pertenecen a la clase «color». Además tenemos tres enlaces cada uno con un id distinto. Aparte en la cabecera se definen dos estilos CSS para los párrafos (para darle un color de fondo) y se importa la librería jQuery.

Ahora añadimos el código jQuery en la etiqueta script de la cabecera:

$(document).ready(function(){
	$("#redLink").click(function(event){
		$("p.color").removeClass("yellow").addClass("red");
	});
	$("#yellowLink").click(function(event){
		$("p.color").removeClass("red").addClass("yellow");
	});
	$("#resetLink").click(function(event){
		$("p.color").removeClass("red").removeClass("yellow");
	});
});

Destacamos lo siguiente:

• Como hemos dicho, todo nuestro código se engloba en una función que se suministra al evento $(document).ready.
• Utilizamos el selector para buscar por id para localizar cada uno de los enlaces y pasarle un código a su evento click.
• Dentro del código del evento click utilizamos el selector «p.color» para localizar los párrafos pertenecientes a la clase «color».
• Utilizando la concatenación de funciones (Interface Fluida) modificamos el árbol DOM añadiendo o quitando clases.

Podemos ver este ejemplo funcionando en: ejemplo de jQuery funcionando.

Utilización de JQuery Cycle Plugin

Tengo pensado para más adelante escribir una entrada más detallada sobre JQuery, una librería JavaScript que nos facilita enormemente la integración de dicho lenguaje en nuestra página. Sin embargo me adelanto con esta pequeña entrada que describe la utilización de uno de sus plugins.

Una de las características destacables de JQuery es la existencia de multitud de plugins, para incorporar una gran variedad de efectos y funcionalidades a nuestro código HTML.

En esta entrada presento el plugin Cycle, que como podéis ver en su página logra unos efectos espectaculares para rotar un contenido (imágenes es lo más habitual, aunque se pueden rotar otros contenidos).

Estaba yo intentando adaptar uno de dichos efectos a un pequeño proyecto. Añadía los enlaces a los ficheros JavaScript en la cabecera:

<script type="text/javascript" src="./js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.min.js"></script>

Definía el contenido a rotar dentro de un div con id determinada. En este caso el contenido eran varios divs con imágenes y texto cada uno:

<div id="rotar">
<div>
<image height="135px" width="180px" src="image1.gif"/>
<b>Test1</b>
Texto de primera nota.</div>
<div>
<image height="135px" width="180px" src="image2.gif"/>
<b>Test2</b>
Texto segundo</div>
</div>

Y finalmente llamaba a la función cycle() dentro del $(document).ready(function() { como es habitual en JQuery:

$(document).ready(function() {
	$('#rotar').cycle({
		fx:     'scrollUp',
		timeout: 6000,
		delay:  -2000
	});
});

Pero no conseguía que funcionara. Me centraba en la llamada a la función cycle(), pero finalmente descubrí el problema…

Parece que determinados efectos de cycle() entre ellos scrollUp que es el que yo pretendía usar necesitan que esté definida la altura en el contenido a ciclar. Por lo tanto modifiqué el CSS de mi proyecto para añadir dicha altura y todo perfecto:

#rotar {
	height: 230px;
}

Hasta aquí la presentación de este gran plugin, con la solución a este pequeño problemilla incluida.

¡Hasta la próxima!