Archivos

jQuery Edit in Place y Catalyst

Cuando trabajamos con alguna aplicación web, siempre necesitamos opciones para editar registros de nuestra base de datos, una forma bastante novedosa de hacerlo es utilizando Ajax, existe un plugin para jQuery que nos permite hacer lo que se ha denominado Edit in Place o “editar en el sitio”. El objetivo es hacer que un texto pueda ser editado directamente sin necesidad de ir a otra página, se hace click sobre el texto y este se convierte automáticamente en un campo de texto de un formulario donde se puede editar la información, enviarla y guardarla automáticamente. Esto se logra en jQuery con un plugin, Jeditable, se puede ver una demostración con todas las opciones disponibles. Para utilizarlo debemos tener la ultima versión de jQuery y descargar el plugin, luego lo demás es sencillo, se carga la librería y el plugin en la página donde se van a utilizar, se crea una pequeña función usando jQuery en la misma página para indicar cual de los elementos (X)HTML van a convertirse en campos de texto, y se crea la función del lado del servidor que recibirá y procesará los cambios.
La forma que yo lo utilizo con Catalyst es la siguiente:
Una vez que he creado el controlador, por ejemplo Clientes y obviamente el Modelo de la aplicación creo un método que mostrará un registro de un cliente y otro que recibirá los datos y guardará los cambios en la base de datos:
Continue reading jQuery Edit in Place y Catalyst

Autocompleter en Catalyst con jQuery

Una de las grandes utilidades que podemos obtener con Ajax es la del autocompleter, jQuery nos facilita mucho esta tarea con un plugin muy bueno. Si estamos usando Catalyst, podemos hacer uso de este plugin fácilmente, aqui les pongo un ejemplo de lo que yo he estado haciendo: Estoy usando el módulo TTSite para las vistas, me gusta por que crea una estructura del sitio con una cabecera, el cuerpo y el pie de página, y simplemente tenemos que modificar el CSS (si, támbien lo genera) a nuestro gusto y preocuparnos por el contenido de la página. Quería agregar un formulario de búsqueda para los registros (clientes) que estoy almacenando en la base de datos, y decidí­ probar uno de los plugins de jQuery para autocompleter. Lo primero que hay que hacer obviamente es descargar las librerías javascript, la gente de Interface Element, que proveen una buena colección de plugins, ofrecen una opción interesante que es personalizar la descarga, o sea escoges los plugins que quieras o necesites y te crean un archivo comprimido, bueno yo los baje todos por que queria probarlos! :D , en fin, una vez descargados, obviamente hay que bajar la librería que vamos a usar jQuery y poner todos estos archivos juntos en un directorio, en mi caso guardé todos los archivos en: "root/static/js/" (esto es dentro de la estructura que crea Catalyst de nuestra aplicación …). Luego de descargar y guardar los archivos tenemos que configurar nuestra vista para que pueda cargar las librerías javascript, en el caso de usar TTSite simplemente editamos el archivo: "root/lib/site/html" y agregamos unas lí­neas como las siguientes (obviamente entre las etiquetas <head> </head>:

[geshi lang=HTML]     <script type="text/javascript" src="[% Catalyst.uri_for('/static/js/jquery.js') %]"></script>

   <script type="text/javascript" src="[% Catalyst.uri_for('/static/js/iutil.js') %]"></script>

    <script type="text/javascript" src="[% Catalyst.uri_for('/static/js/ifx.js') %]"></script>

    <script type="text/javascript" src="[% Catalyst.uri_for('/static/js/ifxslide.js') %]"></script>

    <script type="text/javascript" src="[% Catalyst.uri_for('/static/js/iautocompleter.js') %]"></script>[/geshi]

Continue reading Autocompleter en Catalyst con jQuery