Tag Archive for: AJAX

26Dec 2009 9 Comments

AJAX ocultar mostrar secciones de nuestro sitio

Categories: Otros - Tags: , ,

En este tutorial explicaré como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, yo lo suelo usar cuando tengo un formulario de búsqueda y deseo mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón

Ocultar un elemento

Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:

1
2
3
4
5
<div id="paraocultar">
<p>Aqui el texto o elementos del formulario que se ocultarán</p>
</div>
<p>Para ocultar podemos usar link o un boton</p>
<a id="oculta">Click para ocultarlo</a>

Nuestro código jquery para detectar que se ha hecho click sería:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    estado=0;                          
    $("#oculta").click(function () {
       if(estado==0) {
         $('#paraocultar').slideUp('fast');
         estado=1;
      } else {
         $('#paraocultar').slideDown('fast');
         estado=0;
      }
    });
});

//////// Actualización ///////
He modificado el script para funcionar con múltiples elementos, pueden ver el ejemplo aqui

Download - Jquery ocultar mostrar secciones
Demo

21Dec 2009 2 Comments

Jquery music player

Categories: AJAX, javascript - Tags: ,

Este es un muy interesante plugin para jquery que nos permite reproducir música usando HTML y Flash muy fácil de implementar y lo más importante es que es muy liviano además de personalizable usando CSS.


Veamos algunas de sus características

  • Permite reproducir y controlar archivos de música (incluso listas de reproducción)
  • 100% personalizable usando HTML y CSS
  • Rápido stream
  • Soporta MP3 y OGG

Pueden descargarlo AQUI

01Dec 2009 1 Comment

AJAX modificando atributos con jquery

Categories: AJAX, javascript - Tags: ,

Siguiendo con los artículos sobre AJAX y jquery veamos ahora como modificar atributos de algún elemento de nuestra página web, primero a modo de introducción veremos como funcionan los selectores en jquery y luego veamos como capturar y/o modificar atributos

Selectores en jquery

Los selectores de jquery funcionan igual que los selectores de jquery para elegir objetos(div, p, input…), clases(.miclase) o id(#miid), por ejemplo para seleccionar un DIV

1
<div id="midiv"></div>

Para elegirlo usariamos en javascript

1
var midiv1 = $("#midiv");

Tomando los valores de un atributo

Ahora que sabemos como elegir un objeto veamos como recoger el valor de cualquiera de sus atributos

1
2
3
var titulo = $("a.milink").attr("title");
var alt = $("img").attr("alt");
var valor = $("#mitexto").attr("value");

Modificando atributos de un elemento

Hay 2 formas de hacerlo, la primera es mejor cuando se trata de modificar un solo atributo mientras que la segunda sirve para recoger múltiples atributos
Deshabilita un boton

1
$("#miboton").attr("disabled","disabled");

Cambia la imagen a miimagen.gif además cambia el titulo y el texto alternativo(ALT)

1
2
3
4
5
$("img").attr({
          src: "/images/miimagen.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });

Como ven es muy fácil modificar los atributos de cualquier elemento, esto combinado con eventos podriamos hacer que aparezcan o desaparezcan opciones, se habliten botones, se oculten DIV completos, se muestren mensajes de alerta y un largo etc.
Pronto postearé algo más aplicado al manejo de formularios.

15Nov 2009 24 Comments

Web Modular PHP AJAX parte 2

Categories: AJAX, javascript - Tags: , , ,

En la primera parte de este tutorial expliqué como hacer funcionar una web modular donde el contenido cargara dinamicamente sin recargar la página usando AJAX sin embargo sólo funcionaba con links del menú y no con links que estuvieron dentro de las páginas cargadas.

Hacer funcionar ajax en links internos

Ese código funciona con el menu pero para que funcione incluso en links de páginas cargadas usando AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código.

1
2
3
4
5
$('.ajaxmenu').livequery('click',function(){
            var loadUrl = $(this).attr('href');
              $("#contenido").html(ajax_load).load(loadUrl);
            return false;
     });

¿Cómo hago funcionar el código si uso anclas?

Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll

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
<script language="javascript">
$(document).ready(function(){
$.ajaxSetup ({
    cache: false
});
var ajax_load = "<img src='img/load.gif' alt='loading...' />";
$(".ajaxmenu").live("click", function(){
    myUrl= $(this).attr('href');
    if (myUrl.match('#')) {
          var myAnchor = myUrl.split('#')[1];
          /*Ahora arreglamos el URL - para evitar problemas en ie6*/
          var loadUrl = myUrl.split('#')[0];
    }else{
        var loadUrl = $(this).attr('href');
    }
    $("#contenido").html(ajax_load).load(loadUrl,function(){
        if (myUrl.match('#')) {
        /*Calculamos la distancia entre el anchor y la pagina y animamos*/
          var targetOffset = $("a[name='"+myAnchor+"']").offset().top;
          $('html').animate({scrollTop: targetOffset}, 400);
        }
     }
    );
    return false;      
});
});
</script>






10Oct 2009 20 Comments

Agregar campos usando AJAX jquery

Categories: AJAX, javascript - Tags: , ,

Seguro hemos visto algunas páginas ajax en las que piden por ejemplo correo luego podemos apretar un botón “añadir” y se agrega un campo más para insertar un nuevo correo y asi cuantos deseemos; también hay algunos más complicados en los que puedes añadir por ejemplo detalles de tu experiencia laboral en un curriculum.

La idea es los casos mencionados es exactamente la misma (campos mas, campos menos) por cuestión de espacio y tiempo explicaré como funciona la más sencilla para ello debemos tener claros algunos conceptos previos.

Arrays de controles HTML

Como no sabemos cuantos campos quiera añadir el usuario, debemos estar preparados para recibir cualquier cantidad de datos por lo cual vamos a usar un array de controles como este:

1
<input type="text" size="20" name="email[]">

Lo unico distinto con cualquier otro control es que al final del nombre uso unos corchetes.

Manejando arrays de controles con PHP

Normalmente en PHP los campos recibidos llegan con POST o GET según corresponda y podemos manejarlo directamente pero con los arrays se manejan un poco distinto, algo así:

1
2
3
4
5
6
<?php
$emails=$_POST['email'];
for ($i=0; $i<=count($emails); $i++) {
    echo $emails[$i].'<br>';
}
?>

¿Cómo agregar campos?

Para esto voy a usar un link que invoque a una funcion javascript que agrega el campo adicional

1
<a href="#" onclick="agregar();">Agregar</a>

La función usando jquery es muy sencilla basta usar “attend” para que al final agregue un campo adicional

1
2
3
4
5
6
<script type="text/javascript">
function agregar() {
    campo = '<li><label>Email:</label><input type="text" size="20" name="email[]" /></li>';
    $("#emails").append(campo);
}
</script>

El tema de la presentación o de usar alguna imagen ya depende de nuestra hoja de estilos aunque en este ejemplo he usado un sólo campo es posible usando el mismo código para añadir bloques completos de campos.

Ver demo   Descargar

——– Actualización ——-
Varios lectores me preguntaban como hago para borrar los campos ingresado, eso lo ven AQUI

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi