ajax y jquery en cakephp
En este post voy a explicar como es de simple usar ajax y jquery en cakephp. Se puede usar ajax para muchos temas, guardar los checkbox de un formulario sin tener que hacer submit, para seleccionar subcategorias de una categoría en varios select option aninados, para recargar el contenido de una determinada zona de la web, en general para muchas cosas pero siempre que se necesite.
En este caso voy a explicar como usar menus desplegables con ajax y jquery. De manera que teniendo un menú select option con una serie de categorías al seleccionar una de ellas te aparezcan sus subcategorías.
Básicamente necesitamos descargar y subir la librería de jquery a nuestro servidor o usar la que hay en Google Code, crear nuestro formulario con una serie de id que son los elementos que harán de “bindeo” con jquery, una función en nuestro controlador que busque las subcategorias de la categoria dado el id y una vista para renderizar el select option con las subcategorías que hemos obtenido
Lo explico con mas detalle.
1.- INSERTAR LA LIBRERÍA DE JQUERY Sino nada va a funcionar, podéis incluir directamente este fragmento de código entre las etiquetas <head></head>
1
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
2.- EL FORMULARIO Tener una vista o un HTML donde tengáis un formulario. En el formulario habrá que crear un identificador para el select option en este caso he puesto
1
id="select_categoria"
Este es un select option de ejemplo, faltaría poner todo el html que vosotros necesitéis, pero para explicarlo con sólo esto es suficiente
1
2
3
4
5
<select id="select_categoria">
<option value="1">categoria1</option>
<option value="2">categoria2</option>
<option value="3">categoria3</option>
</select>
También habrá que crear un div o un p para que cuando se devuelva el select option con las subcategorias se pinten en dentro de un html. Lo ideal sería ponerlo después del select option para que las subcategorias se visualicen a continuación
1
<div id="div_subcategorias_wrapper"></div>
3.- LAS FUNCIONES JQUERY
Este puede que sea el paso mas difícil de todo el proceso
El id que hemos puesto al select option de las categorías se utiliza para que jquery haga un bindeo a una determinada acción que nosotros especifiquemos. En este caso estamos bindeando que el id select_categoria, en jquery se definen mediante el símbolo # (por si alguien no lo sabe y esta algo perdido) se binde a una accion de click, por lo que cuando se seleccione una categoría haciendo click sobre ella se lanza la función siguiente de jquery.
Se hace una llamada ajax $.ajax(); con una serie de parámetros
type: si es GET o POST
url: la url a la que llamamos para obtener la información necesaria, $(this).val() es el valor de la categoría que he seleccionado, en este caso si identificador por el que buscaré sus subcategorías relacionadas
beforeSend: (antes de enviar) lo que hago es meter en el div que hemos creado para pintar los select option de las subcategorias, meto un div con un gif animado, esto da el efecto como que se esta cargando algo y el usuario entiende que tiene que esperar. El gif que verían sería algo como esto: 
success: cuando ha terminado y se devuelve la información, se genera la variable msg (yo la he llamado así) que contiene el resultado de lo que se ha ejecutado en el controlador, simplemente lo insertamos en el div anterior y ya tendríamos los select option cargados dinámicamente.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("document").ready(
function() {
$('#select_categoria').bind('click', function()
{
$.ajax({
type: "GET",
url: "/articulos/obtener_subcategorias/"+$(this).val(),
beforeSend: function() {
$('#div_subcategorias_wrapper').html('<div class="rating-flash" id="cargando_div">Cargando <img src="/img/ajax-loader-mini.gif"></div>');
},
success: function(msg){
$('#div_subcategorias_wrapper').html(msg);
}
});
});
}
);
4.- El CONTROLADOR O LA LÓGICA DE PHP
Esta parte es variable, yo estoy explicando el ejemplo para quien usa CakePHP pero se puede hacer en php puro si se quiere u otro framework.
También hay que tener cuenta que el siguiente controller es de ejemplo, y sirve como guía para quien ya sepa CakePHP.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
class ArticulosController extends AppController
{
var $uses = array('Articulo','ArticuloCategoria','ArticuloSubcategoria');
function index()
{
// lógica
}
function obtener_subcategorias($id)
{
$this->layout = 'ajax';
// aquí la lógica que uséis para obtener datos de la base de datos
// y generar un array con todas las categorías
// por lo normal y rápido será usar la funcion find con el primer parámetro list para que lo devuelva formateado con el identificador de cada opcion como key de los nodos del array
$subcategorias = $this->ArticuloSubcategoria->find('list',array('conditions' => array('ArticuloSubcategoria.categoria_id' => $id), 'fields' => 'nombre_subcategoria'));
$this->set('listado_subcategorias',$subcategorias);
}
}
?>
5.- RENDERIZAR EL SELECT OPTION EN LA VISTA
Renderizar el resultado de lo que hemos obtenido en la función obtener_subcategorias() en la vista Necesitaremos crear la vista /app/views/articulos/obtener_subcategoria.ctp
1
<? echo $form->input('Articulo.id_subcategoria', array('options' => $listado_subcategorias,'label'=>false,'div'=>null));?>
Y listo! el resultado lo recoge el ajax y lo pinta en el div que hemos explicado anteriormente.
Es muy sencillo usar AJAX con JQUERY, integrarlo con CakePHP puede ser algo mas liado hasta que lo haces la primera vez.
Cualquier duda o comentario no dudéis en escribirlo.