Miguel Manchego

Jquery: Interactuando PHP con elementos sin recargar

admin — Thu, 02 Sep 2010 18:52:55 +0000

Para entender este tutorial es necesario tener una mínima base de PHP y Jquery, además de haber leido este otro tutorial. Una vez que tengas todo eso claro vamos a ver como hacer que javascript responda según la respuesta que de el script PHP.

Este script se podría utilizar para verificar si un dato ha sido actualizado, verificar si encontró un registro, etc, etc. Yo por una cuestión de mantener simple el ejemplo voy a hacer que script.php genere un número aleatorio entre el 1 y el 20, si el número generado es mayor a 10 mostrará un mensaje (ganaste), de lo contrario mostrará otro mensaje, si en vez de ese else no pongo nada pues simplemente no se actualizará el DIV. Tengamos en mente que no sólo puede actualizarse un DIV es posible mostrar mensajes, cargar formularios y hacer cualquier cosa que javascript y nuestra imaginación permita.

miscript.php

1
2
3
4
5
6

/// aqui puedo hacer invocaciones a la base de datos o lo que se me ocurra
$minumero=rand(1,20);
/// retorno una respuesta
echo $minumero;
?>

Mi codigo javascript

Luego de invocar a jquery, necesitariamos el sgte. código:

1
2
3
4
5
6
7
8
9
10
11

Observación 1: Si fuera una invocación a la base de datos puedes enviarle a javascript un valor boolena true/false para saber si se encontraron resultados.

Observación 2: Esto funciona bien con respuestas simples, si requiero devolver varias variables lo mejor es enviarlas como cadena y luego parsearlas algo como: mivariable1=algo&mivariable2=algo&mivariable3=algo… pero si necesitas recoger un gran volumen de datos como retorno lo ideal sería obtener una respuesta XML o JSON

XHTML: registro al estilo facebook

admin — Wed, 01 Sep 2010 16:17:38 +0000

Esta de moda el Facebook y claro también lo está hacer formularios, íconos, efectos a ese estilo. En este tutorial te explican detalladamente como crear tu propio formulario de registro a ese estilo usando XHTML y CSS.

El resultado queda como esta imagen:

Pueden el tutorial AQUI y la demo AQUI

Jquery: ocultar mostrar varios elementos

admin — Tue, 24 Aug 2010 11:51:34 +0000

Hace un tiempo publiqué un tutorial explicando como como ocultar o mostrar un elemento, pero también es posible hacerlo con múltiples elementos sin tener que agregar un script por cada elemento, para eso hay que usar id que identifiquen a los elementos y clases para conocer su estado.

Simplemente con fines didácticos he planteado el ejemplo usando el evento onclick y usando clases sin embargo es posible simplificarlo mucho más asignando el click desde jquery y no usando clases sino atributos.

El HTML de los elementos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Es posible usar cuantos elementos se requieran y puede usarse cualquier tipo de elemento no exclusivamente div, basta que les pongamos un id y la clase que me indica su estado (visible/invisible)

Para el menu que muestra u oculta los elementos, sería el siguiente script:

1
2
3
4
5
6
7
8

<ul>
<li><a href="#" onclick="javascript:oculta('item1')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item2')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item3')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item4')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item5')">Oculta/Muestra</a></li>
<li><a href="#" onclick="javascript:oculta('item6')">Oculta/Muestra</a></li>
</ul>

La función para ocultar/mostrar usando jquery

Como vemos el menu invoca a una función llamada “oculta” y le envía como parámetro el id del elemento que queremos ocultar o mostrar según sea el caso, una vez que capturamos ese elemento pasamos a verificar si esta o no visible para finalmente aplicarle una pequeña animación según sea el caso.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Demo

Sammy: url ajax con soporte del boton atras

admin — Fri, 20 Aug 2010 16:14:10 +0000

Seguramente han visto en Facebook que se carga contenido AJAX y al hacerlo se agrega una ruta en el browser(navegador) de tal forma que si apretamos el botón atrás se carga el contenido anterior a la llamada AJAX, pues existe una solución muy simple para hacer esto mismo usando Jquery allí es donde estra a jugar sammy.js

Lo primero es invocar a jquery y a sammy, algo como:

1 2	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/sammy.js"></script>

Luego en el body vamos a insertar un pequeño menu y el contenedor que nos va a servir para el ejemplo:

1
2
3
4
5
6
7
8

<div id="nav">
<ul>
<li><a href="#/inicio">inicio</a></li>
<li><a href="#/formulario">formulario</a></li>
<li><a href="#/label/drafts">drafts</a></li>
</ul>
</div>
<div id="content"></div>

Antes de complicar las cosas veamos como luce la versión más simple:

1
2
3
4

var ratPack = $.sammy(function() {
this.element_selector = '#content';
// todas nuestras rutas irían aquí
});

En nuestro menu hay 3 rutas: #/inicio, #/formulario, #/label/drafts
Eso significa que por cada ruta debemos insertar un código similar a este:

1
2
3
4

this.get('#/inicio', function(context) {
context.app.swap('');
context.$element().append('

inbox

');
});

Lo único que hago allí es que al ingresar la ruta misitio.com#/inicio se va cargar en el div content un titulo H1
Pueden ver un ejemplo más complicado incluyendo envío de formularios AQUI

Para el envío de formularios usando el método POST el código sería algo así:

1
2
3
4
5

this.post('#/formulario', function(context) {
context.app.swap('');
var to = this.params['to'];
context.$element().append('

hola ' + to + '

');
});

Igualmente para los que hablan inglés pueden ver el tutorial que tomé como modelo AQUI

Jquery: Plugin para validar al estilo HTML5

admin — Thu, 19 Aug 2010 16:56:32 +0000

Anteriormente había hablado de un plugin de Bassistance para validar, pero esta opción me parece muy interesante ya que usa las propiedades nativas de HTML5, aunque hay algunas caracteristicas que se hacen extrañar de las que hablaré más adelante.

¿Cómo usarlo?

Lo primero es incluir el script y luego indicar que formulario debe afectar, personalmente creo que mejor es colocar un id.

1
2
3
4
5

La forma de realizar la validación es usando las propiedades HTML5, es decir algo similar a:

1	<input type="email" name="email" id="email"/>

¿Por qué usarlo?

Hay varios motivos:

Nos vamos acostumbrando a la sintaxis de HTML5
Incluye ciertas validaciones que no tiene el plugin de bassistance además de funciones tipo texto por defecto
El envío asíncrono de datos viene incluido

Puntos por pulir

Cuando se pega del portapapeles un texto a un textarea con un número máximo de caracteres este no se corta para validarlo
Los mensajes de error no son personalizables, aunque incluye por defecto mensajes en español e inglés modificables directamente sobre el código del script

Puedes ver más sobre este plugin AQUI, yo tuve problemas para acceder a dicha dirección, si no funciona en tu país usa un proxy anónimo como por ejemplo www.hidemyass.com