Variables de SESSION con JavaScript

A veces nos surge la idea de combinar JavaScript con PHP o viceversa.

En una de esas nos podemos encontrar con que queremos usar variables de sesión desde JavaScript.

Ésto es muy fácil, se logra de la siguiente manera:

$(document).ready(function() {
     var variable_js = localStorage['variable'];
     if (variable_js == 'hola mundo') {
          localStorage['variable'] = "ola k ace";
     }
});

Donde el vector LOCALSTORAGE es la equivalencia a $_SESSION, y obviamente lo que va dentro de los corchetes... Pues uds ya saben.

Así de fácil gente.

Espero les ayude.

Saludos.

"Drag and Drop" con HTML5 y JavaScript

Me preguntan:

Fer, cómo puedo hacer un Drag and Drop de algún elemento, así como los Quiz y cosas así ?

Fácil! Usando la familia de etiquetas DRAGG que viene en cualquier elemento.

Les pongo el ejemplo.

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="/ruta/de/la/imagen.png" draggable="true" ondragstart="drag(event)">

Como pueden ver, se usan las etiquetas propias de las funciones Drag and Drop.

Les dejo las funciones JavaScript que actúan:

Esta función  se encarga de hacer DRAGGABLE (movible) el objeto deseado.

function drag(ev){
     ev.dataTransfer.setData("Text",ev.target.id);
}

Esta es la función que se encarga de hacer DROPPABLE (que acepte el DRAGG) el objeto marcado.

function allowDrop(ev){
     ev.preventDefault();
}

Esta función perimte hacer válido el DRAG y el DROP de los elementos. Opcionalmente puedes meter funciones a ejecutarse una vez completada la acción.

function drop(ev, id){
     ev.preventDefault();
     var data=ev.dataTransfer.getData("Text");
     evtarget.appendChild(document.getElementById(data));
}

Como puede ver no es complicado, pero su chiste hacerlo.

Esto puede ser aplicable para cualquier elemento: DIV, TABLE CELL, IMG; el que quieran. Solo recuerden colocar las funciones correctas y nombrar los IDs correctos para hacerlo posible.

Los dejo chavos.

Ya saben... Si necesitan algo, avisen.

Saludos.

Enviar un STRING mediante GET con JavaScript

Me preguntaron hace unos días:

Oye Fer, cómo se puede enviar una cadena de caracteres (STRING) por GET para poder usarlo en otro archivo, pero sin usar un FORM ?

La respuesta más sencilla era esa: un formulario. Pero luego pensé: y si quiero enviarlo sin hacer un refresh de nada, y si son valores obtenidos de un QUERY, y si... ?

Por supuesto, la opción lógica es una: JavaScript.

Perdón, me gusta contar historias y a veces no puedo parar.

Sin más les dejo cómo hacerlo:

Se puede lograr usando la función ONCLICK en cualquier etiqueta que la soporte, usaré una imagen como ejemplo:

<img src="/ruta/imagen.png" onclick="enviar_string_get('string a enviar por get')">

Toma en cuenta que el nombre del método lo puedes cambiar por el que más te guste.

Ahora veremos el método que recibe la cadena:

function enviar_string_get(cadena){
          $('#content').load('archivo_que_recibe.php?id='+escape(cadena));
}

 Como pueden ver usé el método .load() para cargar, en un DIV, el archivo que recibirá el GET para su manipulación y, en este caso, mostrar la información necesaria.

El método .scape() es el que se encarga de convertir la cádena en un texto legible para el servidor.

Fácil, verdad ?

Espero les haya ayudado.

Nos leemos en la otra.

Y ya saben, si tiene alguna duda o quieren algo en especial sólo pídanlo.

Como dice aquel cantante: Mientras el público siga aplaudiendo, Chente sigue cantando.

Múltiples Instancias .datepicker()

Estaba en el trabajo, arreglando unas cosas propias del mismo.

Un cliente había pedido que fuera posible asignar una determinada fecha para determinada función.

Recordé enseguida a "DATEPICKER", un sencillo pero potente Widget de JavaScript capaz de mostrarnos calendarios para poder hacer uso de las fechas.

Pero me encontré con un problema: cómo puedo usar múltiples instancias en el mismo archivo ?

La solución primera que se me ocurrió fue modificar el script directamente para poder agregar las instancias necesarias. Pero luego pensé: y si no son dos, sino 20, 50, 100, 1000 instancias las que necesito ?

Empecé a googlear para encontrar una solución, y no parecía ser tan obvia como después me dí cuenta.

Para no hacerles el cuento largo les platico:

La funcionalidad y declaración básica de DATEPICKER es a través de ID's (id=""), pero recordemos que los ID's son eso, identificadores únicos.

Qué hacemos cuando queremos que varios elementos estén concentrados en el mismo grupo ? Usamos CLASES (class="").  Y ahí está la solución.

Declaramos nuestros INPUT's donde queremos usar DATEPICKER, dándoles la misma clase:

<input type="text" id="uno" class="class_datepicker" />

<input type="text" id="dos" class="class_datepicker" />

<input type="text" id="tres" class="class_datepicker" /> 

Luego, en el uso de la función:

$(function() { 

          $('.class_datepicker').each(function(){

                     $(this).datepicker();

});

});

Donde class_datepicker es el nombre que tú le quieras dar a la clase.

Así de simple.

Así de sencillo.

Espero les sirva ésta pequeña ayuda.

Saludos. Hasta la otra.

Qué es MariaDB?

Hace un tiempo anda haciendo ruido un SGBD que promete muchas cosas. Su nombre es MariaDB.

Qué es MariaDB? Es un SGBD creado por Michael Widenius, fundador de MySQL, cuyo propósito principal es ganarle un rubro "crítico" a MySQL: libertad.

Recordemos que MySQL es software libre siempre y cuando no lo uses para proyectos comerciales.

MariaDB tiene todo lo que MySQL; librerías y APIs de y para terceros, compatibilidad, obviamente usa instrucciones SQL, etc.

Las principales diferencias, sin tomar en cuenta la de la licencia GPL, es que incluye 2 motores de almacenamiento nuevos: Aria y XtraDB.

Mientras que Aria proporciona ventajas por sobre MyIssam, XtraDB hace lo propio InnoDB.

MariaDB surge por la compra de Oracle a Sun Mycrosystems (todos conocemos la historia y lo que provocó).

Al ser un "fork" de MySQL se asegura que siempre habrá una versión gratuita disponible para todos.

Es multiplataforma asi que pueden descargarlo para Windows, Linux y MacOS.

Actualmente se encuentra en la versión 10beta. La versión estable es la 5.

Lo probaré y les contaré que tal está.

Saludos.