Miguel Manchego » javascript

Validar formularios en web modular

admin — Sat, 11 Dec 2010 16:05:44 +0000

Este es una pregunta que me suelen hacer con cierta y la verdad no debería haber complicaciones ya que hacerlo en web modular es exactamente igual que hacerlo en una web que no sea modular.

Veamos primero en este post como se hace en una web común.

Primero en top_page.php debemos invocar el código javascript correspondiente

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

Y luego en la página que queremos hacer la validación pegamos el código validador luego del formulario en este caso un formulario con id comentariosFrm aunque claro esta podemos usar el id que mejor nos parezca.

1
2
3
4
5

Y asi podemos validar formularios en todo nuestro sitio.

Posts Similares:

Jquery:menu desplegable

admin — Thu, 04 Nov 2010 12:49:43 +0000

Existen múltiples opciones para hacer menus desplegables, lo que me gusta de este plugin es que se encarga no sólo de mostrar un submenu sino que además muestra la opción seleccionada, puede aplicar un estilo específico a los menus que contienen submenus y sobre todo que funciona en las diversas versiones de navegadores.

Su implementación es muy simple basta usar una estructura de UL y LI

1
2
3
4
5
6
7
8
9
10

<ul class="menu">
<li><a href="#">op1</li>
<li><a href="#">op2
<ul>
<li><a href="#">submenu1</li>
<li><a href="#">submenu2</li>
</ul>
</li>
<li><a href="#">op3</li>
</ul>

Y para invocarlo basta con pequeño javascript:

1
2
3
4
5

Pueden ver más ejemplos y bajar el plugin AQUI

Posts Similares:

Jquery: Simple WYSIWYG editor

admin — Tue, 19 Oct 2010 11:50:59 +0000

Jquery es sin lugar a dudas uno de los mejores sino el mejor framework ajax principalmente por lo sencillo que es de aprender y por la enorme variedad de plugins que le dan más potencia.

Les presento un plugin interesante llamado jWYSIWYG fue desarrollado teniendo como metas hacerlo liviano, rápido, que aproveche las ventajas de ajax y que sea fácil de implementar.

Si cuentas con un sitio que requiere un editor sencillo con las funciones básicas entonces este es el editor ideal, para cosas así no tendría sentido usar el bastante pesado CKEditor o similares.

Lo puedes descargar AQUI

Posts Similares:

Jquery: Subir archivos usando AJAX

admin — Tue, 19 Oct 2010 11:50:30 +0000

Anteriormente publiqué este tutorial, debido a la gran cantidad de consultas he decidido publicar las respuestas y su actualización a una versión más moderna.

Implementación básica

Lo primero es descargar el plugin de la página de su creador http://www.uploadify.com/download/ esta última versión tiene varias opciones adicionales como la posibilidad de subir múltiples archivos, agregar eventos durante la carga, cuando se completa o cuand se produce un error además puede usar un archivo flash para mostrar el avance de la subida. Recomiendo leer su documentación, bastante completa por cierto, para ver las distintas posibilidades del plugin.

Para nuestro ejemplo básico basta con añadir las dependencias y el propio plugin en otras palabras llamamos a la librería jquery, al swfobject.js y al plugin(jquery.uploadify.v2.1.0.min.js), el único código HTML que necesitamos es:

1	<input type="file" name="fileInput" id="fileInput" />

Para que este simple input se convierta en nuestro uploader ajax añadimos en siguiente código en la cabecera:

1
2
3
4
5
6
7
8
9
10
11

Esta demás decir que debemos verificar bien las rutas de los archivos y el id de nuestro input file. Lo que allí especificamos en la ruta de nuestro archivo .swf que se encuentra en el ejemplo que acompaña el plugin, el archivo uploadify también esta presente aunque luego explicaré como hacer más cosas con este.

Ahora vamos a las dudas:

¿Cómo hago para que muestre una respuesta una vez subido el archivo?

Este plugin incluye algunos eventos que nos permite ejecutar un procedimiento cuando se completa la carga.

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

En el ejemplo estoy usando un alert y a continuación un append para que muestre un mensaje dentro del div con id “midiv”, puedo colocar animaciones o lo que se me ocurra siempre y cuando este dentro de la función onComplete.

¿Cómo hago que se grabe en una base de datos y que PHP genere una respuesta?

Esta demás decir que el proceso depende de la estructura de tu base de datos sin embargo puedo dar algunas pistas, nuestro archivo uploadify necesita una estructura como esta:

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

if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$file_name = $_FILES['Filedata']['name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
$targetFile = str_replace('//','/',$targetPath) . $file_name;
if (move_uploaded_file($tempFile,$targetFile)){
// Aqui escribiriamos toda la conexion de base de datos
// Y ejecutariamos una consulta tipo INSERT INTO mitabla (micampo) VALUES ($file_name);
echo 'Tu archivo se subió correctamente';
} else {
echo 'Tu archivo falló';
}
}
?>

Si se fijan en el ejemplo he colocado un echo indicando que se subió correctamente y otro con el error, para mostrarlos en nuestro javascript debería quedar así:

1
2
3

'onComplete': function(event, queueID, fileObj, response, data) {
$('#fotosWrapper').append(response);
}

Donde response es justamente el valor de ese “echo”

¿Cómo envio más parámetros y no solo la imagen?

Suponiendo que queremos enviar un campo de texto con id “mitexto” (si necesitas enviar más los separas por comas)

1	<input type="text" name="mitexto" id="mitexto" size="30" />

Basta con capturar su valor, quedando algo asi ese parametro adicional:

1	'scriptData' : {'texto': $("#mitexto").val()},

Y capturariamos su valor en PHP con algo como:

1	echo $_POST['texto'];

Fijense bien en el nombre que toma la variable

Finalmente pueden descargar los archivos de este tutorial AQUI

Posts Similares:

Jquery: Invocar dinamicamente JSONP

admin — Mon, 11 Oct 2010 20:38:31 +0000

Hace poco encontré un interesante tutorial en nettuts que explica como usar jsonp para mostrar los último en twitter sin embargo este mismo script puede ser usado con cualquier origen de datos jsonp para ello basta con cambiar los nombres de las variables.

La estructura

Lo primero es crear nuestro esqueleto HTML donde vamos a mostrar los datos

1 2	<h2> Latest Tweets </h2> <ul id="tweets"> </ul>

AJAX para mostrar JSONP

Luego de incluir la librería jquery debemos buscar los últimos mensajes en twitter para esto usamos el siguiente script:

1
2
3
4
5
6
7
8
9
10

(function() {
var UpdatePanel = {
init : function(options) {
this.options = $.extend({
interval : 5000,
number : 3
}, options);

this.updater();
},

Aqui vamos definiendo algunos parámetros como por ejemplo el tiempo para actualizarse (5000), la cantidad de elementos (3)

1
2
3
4
5
6
7

updater : function() {
(function updateBox() {
this.timer = setTimeout(function() {
updateIt();
updateBox();
}, UpdatePanel.options.interval);
})();

El sgte. paso es definir la función updater la cual a su vez va a invocar a updateIt y updateBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

updateIt();

function updateIt() {
$.ajax({
/// tipo de llamada AJAX, url, y tipo JSONP
type : 'GET',
url : UpdatePanel.options.url,
dataType : 'jsonp',

error : function() {},
// Si se consiguen los datos debe actualizar los resultados
success : function(results) {
var theTweets = '',
elem = UpdatePanel.options.elem.empty();

$.each(results.results, function(index, tweet) {
if ( index === UpdatePanel.options.number ) {
return false;
}
else {
// Definimos lo que vamos a mostrar
theTweets += '

' + tweet.text + '

';
}
});
// Finalmente añadimos los ultimos comentarios
elem.append(theTweets);
}
});

Aqui invocamos y definimos la función updateIt();

1
2
3
4
5
6

UpdatePanel.init({
interval : 5000,
number : 5,
url : "http://search.twitter.com/search.json?q=batman",
elem : $('#tweets')
});

Finalmente vamos a inicializar nuestro objeto, definiendo los parámetros respectivos además del lugar donde se mostrarán los útimos mensajes

Pueden ver el código completo AQUI

Y el ejemplo funcionado AQUI