Usando Ajax

Usando Ajax

Siempre es bueno recordar lo simple en forma simple, por eso aqui pongo un ejemplo de cómo incoporar un simple boton en una pagina html que lea un IDPRODUCTO y traiga en respuesta (usando ajax) una lista de productos relacionados.

Artículos Relacionados:

• Cómo insertar scripts eficientemente en Yii framework:http://trucosdeprogramacionmovil.blogspot.com/2012/12/script-vs-cclientscript-yiiframework.html
  
• Cómo insertar el script de jQuery en tu aplicación con Yii Framework:http://yiiframeworkenespanol.org/foro/showthread.php?tid=71
  
• Cómo insertar Ajax usando recursos de Yii:http://yiiframeworkenespanol.org/foro/showthread.php?tid=60

Ejemplo

Via ajax se pedirá a un action alojado en ProductoController.php que nos de una lista de objetos en formato JSON (por eso en el action veras el "header" y la llamada a CJSON::encode ).   Una vez recibida la lista se procesa item por item creando una lista que mostrara un ID y un nombreProducto en un html tag de tipo "UL" (una simple lista).


Paso 1


Tienes una página index.html con un simple botón y un área para incorporar el listado allí. Omitiré la parafernalia de Yii Framework, dejando solo lo del ejemplo:

1. <div>
2.   <input type='button' id='miboton' value='Probar'></input>
3.   <div id='listado-va-aqui'>...</div>
4. </div>

Paso 2

A esa página index.html se le adjunta el script:

1. <script>
2.    $.fn.imprimeListado = function(listado, selector){
3.       selector.html('Listado:');
4.       selector.append('<UL></UL>');
5.       var ul = selector.find('ul');
6.       $.each(listado, function(key,item){
7.          // item dependera de tu modelo Producto.php
8.          var li = "<li alt='"+item.id+"'>"+item.nombreProducto+"</li>";
9.          ul.append(li);
10.          li = ul.find("[alt='"+item.id+"']");
11.          li.click(function(){
12.              var _item = $(this).attr('alt');
13.              alert("hola hiciste click en el item: "._item);
14.          });
15.       });
16.    }
17.    
18.    $.fn.leerProductos = function(idproducto, selector){
19.        selector.html("<img src='images/loading.gif'/>");
20.        $.ajax({
21.           url: 'index.php?r=/producto/listadoajax/',
22.           type: 'post',
23.           cache: false,
24.           data: { idproducto: idproducto },
25.           success: function(resp){
26.              if(resp.ok == true){
27.                $.fn.imprimeListado(resp.listado, selector);
28.              }else{
29.                selector.html(resp.mensaje);
30.              }
31.           },
32.           error: function(e){
33.              selector.html(e.responseText);
34.           }
35.        });
36.    }
37.    $('#miboton').click(function(){
38.        $.fn.leerProductos(123, $('#listado-va-aqui'));
39.    });
40. </script>

Paso 3

Se crea el action en el lado de Yii Framework, en el controlador obviamente:

1. public function actionListadoAjax(){
2.   // funciona via POST a proposito para saber.
3.   $idproducto = $_POST['idproducto'];
4.   $listado = Producto::model()->findAllByAttributes(
5.      array('idproducto'=>$idproducto));
6.   if($listado == null){
7.     header("Content-type: application/json");
8.     echo CJSON::encode(array('ok'=>false,
9.       'mensaje'=>'idproducto no tiene items',
10.          'listado'=>null));
11.   }
12.   else {
13.     header("Content-type: application/json");
14.     echo CJSON::encode(array('ok'=>true,
15.       'mensaje'=>'', 'listado'=>$listado));
16.   }
17.   // si ocurre una excepcion o si se emite una
18.   // entonces caera en la seccion "error" del
19.   // cuerpo de las opciones del elemento $.ajax:
20.   // throw new Exception('pruebame');
21. }