Archive for the ‘ajax’ Category

Recargar pagina al cerrar colorbox o nyroModal

Lunes, Febrero 22nd, 2010

-
Para todos aquellos que tuvieron problemas al intentar recargar la pagina al cerrar las ventanas generadas por estos pluggins de jQuery acá les dejo unos metodos que les podrian resultar útiles:

Para colorbox:

Código :

$(document).ready(function() {
   $().bind('cbox_closed',function() { 
      location.reload(true);
   });
}

Para nyroModal

Código :

//Esto recargará la pagina cada vez que se cierra cada nyroModal
$(function() {
  $.nyroModalSettings({
    endRemove: function() {
      window.location.reload();
    }
  });
});

//para permitir que solo algunas ventnas tengan este comportamiento
//realizamos lo siguiente:
$(function() {
  $('.myNyroModal').nyroModal({
    endRemove: function() {
      window.location.reload();
    }
  });
});
//En este caso cada ventana con atributo class="myNyroModal" recargará
//la pagina en cuestion

Espero les sirva, a mi me costó mucho tiempo dar con la solucion pero al fin la encontre y la queria compartir con ustedes.
Saludos a todos

Enviar comentario

Menú desplegable con jQuery en 5 minutos

Viernes, Julio 3rd, 2009

Si aún no has descubierto la librería jQuery o aún no te crees su eslogan de "Write less, do more", éste es el momento: con ella vamos a aprender a crear un menú desplegable utilizando listas y muy pocas líneas de código. Para ello, sólo tienes que seguir estos pasos:

0. Descargar la librería

Si accedes a la página de jQuery, verás que a la derecha tienes un enlace para descargar la librería. Como no nos interesa (hoy) analizar su funcionamiento, lo mejor es que escojas la versión comprimida, que ocupa tan sólo 19 KB.

Por cierto, si no la has usado nunca, te recomiendo que te leas el Tutorial de jQuery aquí, en Cristalab.

1. Preparar el menú de navegación

Como, en estos tiempos que corren, nos interesa que la web sea lo más semántica posible, vamos a utilizar listas. Crea un nuevo documento HTML e introduce el siguiente código:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú desplegable con jQuery en 5 minutos</title>
</head>

<body>
<h1>Menú desplegable con jQuery en 5 minutos</h1>
<ul>
   <li><a href="#">Inicio</a>
      <ul>
         <li><a href="#">¿Qué es jQuery?</a></li>
         <li><a href="#">¿Por qué debería usarlo?</a></li>
         <li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li>
      </ul>
   </li>
   <li><a href="#">Ejemplos</a>
      <ul>
         <li><a href="#">Menú desplegable</a></li>
         <li><a href="#">Fade-in, fade-out</a></li>
      </ul>
   </li>
   <li><a href="#">Contacto</a></li>
</ul>
</body>
</html>

Lo cual producirá algo así.

Pero como esto es un pelín feo, vamos a darle un poco de estilo. Procurando que los enlaces principales aparezcan horizontalmente y sin entrar en detalles de CSS, el resultado sería algo así.

2. Esconder las listas secundarias

Añadiendo otra pequeña regla a nuestro estilo CSS, esconderemos las listas secundarias, de forma que sólo se vean, en principio, los enlaces primarios.

Código :

ul li ul {
   /* Resto de estilos... */
   display: none;
}

Quedando la cosa así.

Ahora estamos listos para empezar a escribir el JavaScript.

3. Escribir el código JavaScript

Empezamos, como siempre, con:

Código :

$(document).ready(function() {});

Y ahora, buscamos que, cuando el ratón pase por encima de cualquier elemento de lista que contenga, a su vez, otra lista, se muestre dicha lista secundaria. Haciendo uso de los magníficos selectores de jQuery y del evento "hover":

Código :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   // Muestra y oculta los menús
   $('ul li:has(ul)').hover(
      function(e)
      {
         $(this).find('ul').css({display: "block"});
      },
      function(e)
      {
         $(this).find('ul').css({display: "none"});
      }
   );
});
</script>

Explicamos lo que haya podido quedar un poco más dudoso:

  • El selector es ‘ul li:has(ul)’; es decir: todos los elementos de lista (li) que tengan, a su vez, otra lista [li:has(ul)] y que, obviamente, se encuentren dentro de una lista principal [ul li:has(ul)].
  • El evento "hover" requiere que se especifiquen dos funciones: una para cuando el ratón llega, y otra para cuando se va.
  • "this" hace referencia al elemento de lista sobre el que ha pasado el ratón.
  • find() sirve para lo que su propio nombre indica.

¡Y ya tenemos nuestro menú! Fácil, ¿verdad?

Apéndice: Efectos vistosos

jQuery también nos permite efectos como estos:

Efecto 1
Efecto 2

Como veis, con muy pocas líneas de código y muy poco tiempo hemos conseguido un efecto elegante que podremos usar en nuestros sitios web.

Espero que les haya gustado el tip, ¡un saludo! :)

Enviar comentario

Ventana de alerta para AJAX con Javascript, DOM y CSS

Domingo, Noviembre 2nd, 2008

En este tip les mostraré como armé esta ventana de alerta para AJAX, con DOM y CSS… la idea es entregar una base para agregar funcionalidades tales como drag, eventos de salida, etc:

Esta es la base:

alerta.js

Código :

function alerta(titulo, texto) {

Primero definimos la función, que recibirá el titulo de la alerta mas el texto del contenido… Además, trabajaremos con una imagen llamada fondo.gif, que será el fondo de la ventana mientras se muestra la alerta (yo elegí una imagen de 4 píxeles con 3 transparentes para que se opaque el contenido bajo la alerta) y definimos un div contenedor de nuestra ventana de alerta llamado fondo como sigue:

Código :

var fondo = document.createElement('div');
      fondo.style.backgroundImage = "url(img/fondo.gif)";
      fondo.style.position = "absolute";
      fondo.style.width = "100%";
      fondo.style.height = "100%";
      fondo.style.top = "0px";
      fondo.style.left = "0px";
      fondo.style.verticalAlign = "middle";
      fondo.align = "center";

Ahora bien, tenemos el fondo, pero necesitamos además crear la ventana de alerta que contendrá lo siguiente:

  • Una barra de titulo
  • Un contenedor con el texto de la alerta
  • Un contenedor con el boton "Aceptar"

veamos como sigue:

Código :

var ventana = document.createElement('div');
      ventana.style.width = "200px";
      ventana.style.margin = "5px";
      ventana.style.border = "solid 1px #999999";
      ventana.style.backgroundColor = "#FFFFFF";
      
      var barraTitulo = document.createElement('div');
         barraTitulo.style.backgroundColor = "#e2e3e5";
         barraTitulo.innerHTML = titulo;
      
      var contenido = document.createElement('div');
         contenido.style.padding = "5px";
         contenido.innerHTML = texto;
      
      var cerrar = document.createElement('div');
         cerrar.style.padding = "5px";

Ahora bien, tenemos que crear un botón de tipo input al cual le asignaremos la acción de ocultar nuestra ventana de alerta y dejar nuestra pagina como estaba anteriormente:

Código :

var boton = document.createElement('input');
            boton.type = "button";
            boton.value = "Aceptar";
            boton.onclick = function() {
               fondo.style.visibility = "hidden";
            }

Bien, solo queda agregar estos contenedores a donde correspondan para poder finalizar mostrando la ventana en el body:

Código :

ventana.appendChild (barraTitulo);
      ventana.appendChild (contenido);
      ventana.appendChild (cerrar);
      
   fondo.appendChild (ventana);
   document.body.appendChild(fondo);

return true;
}

Retornamos y esa es todo el código necesario para mostrar la ventana de alerta que se llama mediante alerta(titulo, texto). Espero que les haya servido, saludos!

Enviar comentario

Listar resultados de una búsqueda con PHP + MySQL para AJAX

Lunes, Octubre 27th, 2008

Bueno, la idea es realizar un PHP que nos devuelva un XML con resultados de una búsqueda pasada por parámetros POST y lo envíe como text/xml para poder ser recogido de forma fácil mediante JavaScript con el objeto XMLHttpRequest.

Supongamos ahora que tenemos una tabla llamada STOCK en donde almacenamos los registros referidos a cada producto que comercializa la empresa de Manolo. Los principales campos son ID, CÓDIGO DE PRODUCTO, DESCRIPCION, URLIMG (url de la imagen). Vamos a enviarle a nuestro buscador.php la variable buscar por POST para que la recoja en el caso que corresponda y realice la búsqueda.

Veamos un poco de código:

buscador.php

Código :

<?php
   header("Content-type: text/xml");

Antes que nada definiremos el formato de salida como text/xml para que se interprete el contenido como un archivo XML. Esto lo hacemos mediante la función header() que envía una cabecera.

Código :

require (“conexión.php”);

Aquí el archivo con los datos de la conexión a la base de datos, ojo! es muy recomendable que el archivo NO se encuentre en una carpeta pública.

Código :

$condicion = "";
$resultados = 0;

Definimos las variables en juego, $condicion se refiere a la las especificaciones del SELECT de la búsqueda, luego:

Código :

if (isset($_POST['buscar'])) {

      $cadena = htmlentities($_POST['buscar']);
      $cadena = str_replace(" ", "%", $cadena);
      
      $condicion .= " WHERE DESCRIP LIKE '%$cadena%'";
   }

Con htmlentities() prevenimos la inclusión de caracteres no deseados en la consulta. Es importante realizar un control sobre los parámetros pasados para evitar problemas de inyección SQL. Luego reemplazamos los espacios por comodines “%” para especificar que las palabras separadas deben aparecer juntas en los resultados de la búsqueda.

Código :

// REALIZAMOS LA CONSULTA SEGUN LOS PARAMETROS OBTENIDOS   
   $consulta = "SELECT * FROM STOCK$condicion ";
   if (!($res = mysql_query($consulta)))
      echo $consulta;

Así procedemos a realizar la consulta y obtener los resultados, en caso de que la consulta falle devolvemos el código SQL (es importante reemplazar esto por un mensaje de error pertinente).

Y, finalmente, creamos el documento XML mediante el objeto DOMDocument() y funciones como $objeto->appendChild(), $objeto->createElement(), $objeto->setAttribute() que sirven para agregar nodos, crear nodos y setear atributos de un nodo respectivamente, dentro del archivo XML:

Código :

// OBTENEMOS LA CANTIDAD DE RESULTADOS
   $resultados = mysql_num_rows($res);
   
   /** CREAMOS EL DOM DE NUESTRO XML
     * CON LA SIGUIENTE ESTRUCTURA:
      *
     * <productos n=$resultados>
     *       <producto>
     *         <codigo>codigo</codigo>
     *         <descripcion>descripcion</descripcion>
     *          <urlimg>urlimg</urlimg>
     *       </producto>
     *      ...
     * </productos>
     */
   $dom = new DOMDocument('1.0', 'UTF-8');
   $productos =$dom->appendChild($dom->createElement("productos"));
   $productos->setAttribute("n", $resultados);
   
   for ($i=0; $i<mysql_num_rows($res); $i++) {
   
      // DEFINIMOS LAS VARIABLES DE DATOS
      $txtCodigo = utf8_encode(mysql_result($res, $i, 'CODIGO'));
      $txtDescripcion = utf8_encode(mysql_result($res, $i, 'DESCRIP'));
      $txtUrlimg = utf8_encode(mysql_result($res, $i, 'urlimg'));
      
      // ANEXAMOS LOS NODOS
      $producto = $productos->appendChild($dom->createElement('producto'));
      $producto->setAttribute('id', $txtCodigo);
      
      $codigo = $producto->appendChild($dom->createElement('codigo'));
      $codigo->appendChild($dom->createTextNode($txtCodigo));
      
      $descripcion = $producto->appendChild($dom->createElement('descripcion'));
      $descripcion->appendChild($dom->createTextNode($txtDescripcion));
      
      $urlimg = $producto->appendChild($dom->createElement('urlimg'));
      $urlimg->appendChild($dom->createTextNode($txtUrlimg));
   }

Y, por último, devolvemos el resultado como un XML de la siguiente forma:

Código :

// UNA VEZ CREADO EL XML LO VOLCAMOS EN LA PANTALLA
   $dom->formatOutput = true;
   echo $dom->saveXML();
      
   mysql_close();
?>

Eso es todo, es bastante simple y provee un punto de partida para facilitar el trabajo con el lenguaje de servidor en AJAX y realizar un nexo entre los registros de una base de datos con la aplicación correspondiente, espero haya servido, saludos!

Enviar comentario