Trabaja con datos mediante SQL con Javascript

ByLuis

Me han pasado una librería con la que podemos trabajar con datos en Javascript usando sentencias SQL, aunque los datos hay que recuperarlos de ficheros mediante Ajax y deben estar en un formato específico. La librería no admite inserts aún y los datos no se almacenan en el cliente, sino en el servidor, pero puede ser una interesante alternativa hasta que las bases de datos de HTML5 estén plenamente disponibles en todos los navegadores.

var sql="select NombreCompania, NombreContacto, CargoContacto from clientes order by 3, 2 desc" ;
var res=myJSSQL.Query(sql);

Dispone de una librería PHP que convierte una BD de MySQL o Postgres en el formato específico de la librería javascript.

JavascriptSQL

Similar Posts

Geolocalización por IP mediante Javascript y JSON

ByLuis

Sencillo script que nos devuelve un JSON con la geolocalización según la IP, usando los datos sacados de iplocationtools.com:

function getLocation(){
script = document.createElement('script')
script.src = 'http://www.nitinh.com/ip_query.php?callback=initialize'
document.body.appendChild(script)
}
function initialize(obj){
document.getElementById('spanLocation').innerHTML = obj['City'] + ', ' + obj['RegionName'] + ', ' + obj['CountryName'];
}

IP Address Geolocation Javascript API : JSON

Vía / korayem

Usa jQuery para mostrar mensajes según origen de la visita

ByLuis

Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.

// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/,    'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/,      'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/,         'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/,         'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/,      'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//,               'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);

Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.

jQuery Fun: Greeting Your Site Referrals

Vía / dzone

Esquinas redondeadas mediante Canvas

ByLuis

El tema de las esquinas redondeadas es algo bastante frecuente en los sitios de desarrollo web, pero antes no había visto ninguno que lo hiciera usando Canvas.
corner.png
El script del que hablamos añade varios efectos a nuestras imágenes de forma no obtrusiva, usando para ello canvas. Navegadores como Mozilla Firefox 1.5+, Opera 9+ y Safari mostrarán los efectos indicados, mientras que navegadores antiguos y el Internet Explorer no mostrarán nada.
Para incluir los efectos se debe modificar el class y añadir diversos tipos para cada efecto y así poder hacer combinaciones. Entre los efectos nos encontramos: esquinas redondeadas, efecto shading (con transparencia configurable) y sombras.
Corner.js
Vía / dzone

Select Box Factory: combos con diseño y funcionalidades

ByLuis

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

slectboxfactory.png

  • Usa divs en vez de options
  • Añade funcionalidades al desplegable
  • Los contenedores pueden contener lo que necesitemos
  • Las opciones pueden estar activas o inactivas
  • Los estilos se pueden modificar con facilidad
  • Distintos tipos de combos
  • Filtros

Select Box Factory

Añadir contenido a los datepicker de jQuery UI

ByLuis

En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.

Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.

Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:

// Añadimos datepicker al input que queremos
jQuery('.fecha')
  .datepicker({
    showButtonPanel: true,
    dateFormat: "DD, d MM, yy" 
  });

// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
    var target = jQuery(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    jQuery.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
    // Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
    // Se le añade el valor del nuevo campo select que hemos incluido
    target.val(jQuery('
').html(dateStr).text()+' @ '+jQuery('#horario').val());
}

Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:

jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
  var html = jQuery.datepicker._generateHTMLExtended(inst);
  var div = jQuery('
').html(html);
  div.find('table:first').after('
Horario:
');
  return div.html();
}

// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
  var $obj = jQuery('.fecha');
  $obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});