Yii Dialog Box (con jQueryUI y validacion)

Yii Framework y el DialogBox con jQueryUI usando validacion del lado cliente y del lado servidor.

Código en: https://bitbucket.org/christiansalazarh/ejemplodialogbox/src

Ver el ejemplo corriendo en nuestra sección de ejemplos de Yiiframeworkenespanol.org

Conoce jformer, un framework para hacer formularios con jQuery, http://www.jformer.com/

appdemo contiene una aplicación Yii lista, pero para que funcione hay que cambiar la ruta del framework en /appdemo/index.php y poner permisos 777 en appdemo/assets y appdemo/protected/runtime/ .

Este es uno de los primeros casos que me llevo a encontrar a Yii Framework, y que en un principio sugerí mejorar o ampliar, pero no tuve eco, es ciero estaba muy nuevo y recien aprendiendolo pero ahora me animo a crear una solución aunque sea "por encima" no oficial, pronto me gustaría desarrollar un widget que lo haga de una forma mas compacta.

1. Primero, así se verá. El dialogo en pantalla representa a un modelo llamado "models/Persona.php", se presenta en forma de dialogo jquery, el cual hara un POST via ajax, con validación en cliente y servidor.

2.  Si cometemos un error del lado cliente, entonces el componente jquery-validate.js hara lo suyo y nos informará, no permitirá el submit al action ajax hasta que el lado cliente no este como se pide. Para ello se proveen unas reglas de validación en el script.

3. Si cometemos una violación a una regla de modelo, del lado "ServerSide" entonces el modelo de yii framework nos lo advertirá.

Manos a la Obra

Todo el codigo necesario esta en este repositorio:  https://bitbucket.org/christiansalazarh/ejemplodialogbox/src

1. Necesitarás dos recursos javascript:  jquery-validate.js y json2.js (este ultimo es opcional para depurar),
los puedes descargar de:
jquery-validate.js json2.js

Es importante recalcar que los demas recursos jQuery los proveerá Yii, cuando en la "viewPersona.php" (mas abajo) se solicitan los recursos de script. Por esa razón solo publico aqui los scripts que Yii no proveerá.

2. Necesitas un codigo javascript que realiza al dialogo, el cual está en el vinculo a continuación, este codigo es específico para un dialogo de pruebas, solo debes ajustar los campos ahi indicados.
dialogo1.js

3. Necesitas un action en algun controller. A continuación un extracto de codigo, aquel que va en algun controller, en mi ejemplo, en siteController.php
actionPersona.php

4. Necesitas una vista donde alojar el dialogo y su enlace disparador.
viewPersona.php

Principalmente se registran los scripts jquery en la vistaPersona, que será la que se presenta al usuario. Esto se hace aqui:
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384979982c4710d8a7c865b620000f4/viewPersona.php?at=master#cl-3

Luego en viewPersona.php se crea el layout html que mostrará el cuerpo del dialogo, este dialogo es invisible, por eso el estilo "style='display: none;'".
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384979982c4710d8a7c865b620000f4/viewPersona.php?at=master#cl-35

En esta misma vista un disparador cualquiera sera el encargado de lanzar el dialogo.
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384979982c4710d8a7c865b620000f4/viewPersona.php?at=master#cl-18

Para ello el TAG html "id='lanzador'" es pasado al objeto de clase Dialogo1 (es un objeto jquery) el cual va a agregar un metodo "onclick" al tag "lanzador", cuando el usuario haga click ocurrirá esto:
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384/dialogo1.js?at=master#cl-28

El "action" el cual fue pasado al objeto jQuery en la vistaPersona.php, sera invocado solo cuando la validacion cliente sea exitosa, se lanza aqui:
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384/dialogo1.js?at=master#cl-70

EL ACTION

En siteController.php, colocamos un action (con el código que esta en actionPersona.php), ese action aparte de presentar la vista principal tiene una segunda funcion, la de procesar el POST enviado via ajax por dialogo1.js.

Cuando este action recibe el POST, lo hace recibiendo algo como: "cedula=123&nombre=aasas&apellido=aaa"Por tanto nos toca convertir esto a un array indexado, segun la documentación de CModel::setAttribute indica que es requerido, para poder finalmente pasar el post a $model->attributes como se haría en cualquier action de yii.  Esta conversión de string a array indexado se hace aqui:
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384/actionPersona.php?at=master#cl-12

Finalmente, el action procesa su modelo como ya bien conoces en Yii, usando la funcion validate:
https://bitbucket.org/christiansalazarh/ejemplodialogbox/src/8608caa29384/actionPersona.php?at=master#cl-21