Miguel Manchego » AJAX

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: 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: Chat estilo Facebook o Gmail

admin — Mon, 04 Oct 2010 13:48:32 +0000

Yo prefiero el messenger o los sistemas de asistencia en línea pero si estás buscando algo menos complicado que no requiera instalar ningún software adicional puedes probar con este práctico chat al estilo Facebook o Gmail usando jquery.

Cuenta con algunas funciones interesantes como:

Mantener la conversación aunque se recargue la página
Opciones de minimizar y cerrar
Autoresize para los cuadros de texto
Fácil de integrar

Pueden descargarlo AQUI

Posts Similares:

Jquery: Búsqueda Instantanea parte 2

admin — Fri, 17 Sep 2010 17:25:48 +0000

Como prometí aqui va la segunda parte del tutorial para búsqueda instantanea, voy a mostrar como adaptarlo a 2 páginas web distintas en el primer caso una forma simple usando la web de NeoTeo y para el segundo caso voy a hacer un Flickr Instant usando su respuesta JSON.

NeoTeo

En este caso no existe una respuesta JSON que podamos parsear y mostrar así que usaré un iframe con id “miframe” que transmita mi búsqueda y la muestre. Para ello voy a usar una sola función llamada “getTopSearchResult” la que a su vez invoca la función doneWorking que básicamente nos indica que la búsqueda fue exitosa, ya hablaré de esta más adelante.

1
2
3
4
5

function getTopSearchResult(keyword) {
var the_url = 'http://www.neoteo.com/tag/'+keyword+'.neo';
doneWorking();
$("#miframe").attr('src', the_url);
}

Flickr Instant

Flickr al igual que la gran mayoría de portales web 2.0 si ofrece resultados en formato Json, asi que voy a provecharme de esta característica para buscar resultados y luego poder mostrarlos correctamente ordenados.

Primero voy a buscar resultados con esta función:

1
2
3
4
5

function getTopSearchResult(keyword) {
var the_url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags='+encodeURIComponent(keyword)+'&format=json&jsoncallback=?';
$.getJSON(the_url, displayImages);
doneWorking();
}

Ahora el problema es convertir ese resultado json en algo más coherente y util para el usuario, lo que logro con la función “displayImages”

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

function displayImages(data) { // inicia la busqueda
////var iStart = Math.floor(Math.random()*(11));
// Empezamos
var htmlString = "

;

// Mostramos resultados

each

(

items

function

(

item

)

{

// Decimos que muestre thumbnails cuadrados

var

(

item

media

)

replace

(

"_m.jpg"

"_s.jpg"

)

;

// Empezamos a mostrar uno por uno

+ item.link + '" target="_blank">';
htmlString += ' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '" border="0" />';
htmlString += '

;

}

)

;

// Finalmente llenamos el DIV

(

'#imagesWrapper'

)

html

(

");
}

Este método es válido para cualquier resultado json de donde sea que provengam basta alterar los nombres de las variables que no siempre son link, title, etc

Ver Demo
Download

Posts Similares:

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