Blog


3
enero
- 2012 -
Dori Lopez Nieves

En esta entrada explicaré de forma rápida y sencilla cómo hacer algo en ajax con la última versión de cakephp utilizando JQuery, ya que, en todas las versiones posteriores a la 2.X se ha suprimido el AJAX helper, para hacer esta funcionalidad utilizando el jsHelper.

Configurando JQuery en nuestro proyecto.

1.- Descargar la librería Jquery e instalarla en app/webroot/js (o también puede ser en una subcarpeta. Por ejemplo, en nuestro proyecto la tenemos en /webroot/js/librerias/jquery).

2.-Ahora debemos incluir la librería en nuestra página. Si quieremos incluirla en todas las páginas (como es nuestro caso), añadiremos esta línea en la sección <head> del archivo app/View/Layouts/default.ctp ( si aún no tienes este archivo, lo puedes copiar desde lib/Cake/View/Layouts/default.ctp)

<?php echo $this->Html->script('jquery'); // Include jQuery library

3.- Añadirmos esta línea en el mismo archivo, justo antes de la etiqueta </body> para poder imprimir la caché de JQuery:

<?php echo $this->Js->writeBuffer(); // Write cached scripts ?>

Haciendo una llamada AJAX a través de JQuery

Bien, como ejemplo vamos a suponer que, a partir de un select box de categorías, por ejemplo, queremos que se cargue automáticamente un select box de subcategorias.

¿Cómo lo vamos a hacer?

1.- Asegurarnos de que estamos añadiendo el helper JS en el controlador que llama a la vista:

 public $helpers = array('Js');

2- En este mismo controlador, añadimos una función que provea la funcionalidad:

public function getByCategory() {
$category_id = $this->request->data['Post']['category_id'];

$subcategories = $this->Subcategory->find('list', array(
'conditions' => array('Subcategory.category_id' => $category_id),
'recursive' => -1
));

$this->set('subcategories',$subcategories);
$this->layout = 'ajax';
}

Bien, ¿Qué es lo que hace está función?

  • En primer lugar, está diciendo que se obtengan las subcategorías en función del id de la categoría.
  • A continuación, mete la información en la variable ‘subcategories’ para pasárselo a la vista.
  • Y por último, indica que el layout es ‘ajax’.

Importante: ¿qué hará ahora cake php? Buscará el archivo app/View/nombre_del_controlador/nombre_de_la_funcion.ctp

3- Creamos el archivo get_by_category.ctp. Este archivo es que el que contendrá el código html que se mostrará a través de AJAX. El código que contiene es:

<?php foreach ($subcategories as $key => $value): ?>
<option value="<?php echo $key; ?>"><?php echo $value; ?></option>
<?php endforeach; ?>

4- Bien, ahora nos queda modificar el index.ctp de nuestro formulario. Debajo de el código que nos genera el selecbox de subcategorías, añadiremos la llamada a AJAX:

$this->Js->get('#id_del_campo_categorias')->event(

'change',
$this->Js->request(
array('controller' => 'nombre_nuestro_controlador', 'action' => 'getByCategory'),
array(
'update' => '#id_del_campo_subcategorias',
'async' => true,
'dataExpression' => true,
'method' => 'post',
'data' => $this->Js->serializeForm(array('isForm' => true, 'inline' => true))
)
)
);

Lo que estamos diciendo con esta llamada es que se observe el campo de categorías, y cuando ocurra el evento “change”, se llame mediante ajax al controlador y la acción indicados, modificando el campo subcategorías.

¡Y chapó! Debería estar funcionando.

AJAX en Cakephp 2.0 fue posteado el enero 3, 2012 a las 18:21 en AJAX, CakePHP y. fue modificado el enero 16, 2012 at 9:19. Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed. Puedes dejar una respuesta o hacer un trackback desde tu web.

Compartir: Twitter, Facebook, Delicious, Digg, Reddit

|

6 Comments

Wilfredo on 10/17/2012 at 22:14.

Me encanto la integracion con cake. Sin embargo creí que cake tenía ya sus propias librerias ajax, que se podía usar directamente esas funciones u.u

Responder

Omar Galaviz on 11/04/2012 at 4:03.

Hola Dori,

Me ha servido perfectamente tu script y la utilización del helper para el ajax en los eventos.

queri hacerte una consulta, se te ha presentado la oportunidad de hacer anidaciones de 3er nivel.. me refiero yo por ejemplo he pintado en html un listado de registro via ajax, pero fijate que cada uno de esos registro tiene una operacion de eliminar, con lo que se llamara de nuevo $this->Js->get y poder actualizar dicho registros al eliminar uno.

pero no me ha funcionado pinto esta ultima con ese $this->Js->get, pero alinspeccionar el javascript no lo escribe …

que me recomiendas.

saludos

Responder

Omar Galaviz on 11/04/2012 at 5:17.

Dori, otra consulta,.. sabras algun parametro callback,
de entre lo que utilizas podria serJs->get(‘.delete_task’)->event(‘click’, $this->Js->request( array(‘controller’ => ‘tasks’, ‘action’ => ‘task’, ‘delete’,$task['Task']['id']),
array(
‘update’ => ‘#taski’,
‘async’ => true,
‘dataExpression’ => true,
–>>>>>’success’ => ‘status’,
‘method’ => ‘post’,
‘data’ => $this->Js->serializeForm(array(‘isForm’ => true, ‘inline’ => true))
)
)
);

sabes como llamar a una funcion javascript en ese status???

gracias

saludos

Responder

josue on 11/14/2012 at 15:18.

Gracias por el aporte de verdad que me es de utilidad..
tengo un problemita.. estoy probando con 2 tablas una se llama ‘preguntas’ y la otra ‘respuestas’, tengo dos controladores con las acciones basicas, cree un boton para que cuando lo presionen, dentro de la misma vista de pregunta.ctp se vea el formulario para la respuesta, ‘todo funciona bien hasta alli’, lo que sucede es que cuando se comete una error y se ejecutan las validaciones del formulario se sale de la vista actual y me aparece la pantalla en blanco, solo con la información del formulario.
se ejecuta bien solo cuando los datos ingresados en el formulario son correctos y no tiene que entrar a la validación.. por favor, ¿me podrías ayudar a resolver mi problema?

Responder

Sheryl on 11/30/2012 at 21:53.

Me da el siguiente error: ” An Internal Error Has Occurred “. A qué se deberá? Fue cuando configuré el JQuery… :( Gracias!

Responder

wilob on 01/06/2013 at 20:42.

Estoy iniciando en esto y quiero saber en la pagina de Jquery, cual versión bajar? hay una de production y development del js para agregar al cakephp

Responder

Deja tu comentario

Tranquilo, tu email no será publicado o compartido.
Rellena los campos obligatorios marcados con *


*

Puedes utilizar etiquetas HTML con sus correspondientes atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>