Facilitant la web » jquery

Protegir pàgines amb l’event onbeforeunload

Ramon Vilar Gavaldà — Wed, 09 Sep 2009 14:30:43 +0000

No us ha passat mai que mentre esteu acabant d’omplir un formulari, sense adonar-vos, feu clic allà on no toca i perdeu tot el que heu introduït? Doncs bé, hi ha una senzilla manera per evitar al màxim aquests errors: l’event onbeforeunload.

Cap allà als mitjans dels noranta, Internet Explorer 4.0 introduí aquest event no estàndard, però a diferència d’altres ocasions, aquest cop feu una cosa útil i els navegadors amb motor Gecko ho acabaren introduint a la versió 1.7 de Mozilla (Firefox 1.0).

Aquest event, tal i com resa el seu nom, es dispara just abans de l’event onunload, és a dir, abans que es descarregui el contingut actual de la pàgina, i per tant, ens permet executar algun tipus d’acció en aquest moment.

A diferència dels altres events, aquest funciona força diferent: per tal de mostrar un missatge a l’usuari abans de descarregar la pàgina, el que cal fer és retornar una cadena amb el missatge que es vulgui mostrar. Un exemple podria ser:


window.onbeforeunload = function(e) {
  return "No heu enviat el formulari. Si tanqueu la pàgina perdreu tots els canvis fets fins ara.";
}

Així, en cas d’abandonar la pàgina, se’ns mostraria un quadre amb el missatge:

Esteu segur que voleu sortir d’aquesta pàgina?

No heu enviat el formulari. Si tanqueu la pàgina perdreu tots els canvis fets fins ara.

Premeu D’acord per a continuar, o cancel·la per a romandre a la pàgina actual

Les frases que hi ha just abans i després de les nostres les posa el navegador (en aquest cas Firefox) i no es poden eliminar, substituir ni evitar de cap tipus de les maneres.

Val a dir que en cas que el navegador no tingui implementat aquest event, aquests simplement l’ignoraran i no mostraran pas el missatge a l’usuari.

Pàgines protegides

Recapitulem. La raó principal d’aquest article és que fa poc a la feina em varen demanar que implementés una funcionalitat per a protegir pàgines: volien poder mostrar un missatge quan un usuari intentés abandonar la pàgina enmig d’un formulari dins d’un procés amb un cert flux o bé intentés abandonar una pàgina, la construcció de la qual fos molt costosa. Un exemple ideal per a treure l’event onbeforeunload de la nostra cartera de recursos. Anem a construir-ho.

Per tal de poder marcar si una pàgina la tractem com a protegida o no, és a dir, si registrem l’event onbeforeunload per mostrar un missatge a l’usuari en cas d’abandonar la pàgina, afegirem la classe protected a l’element /body de la pàgina:

Així, si usem jQuery, podem afegir les següents línies de codi per a tenir-ho fet:

$('body.protected').each(function () {
  window.onbeforeunload = function(e){
    return "Si abandones, ho perdràs tot per sempre!";
  };
});

Però tenim un petit inconvenient: si fem clic en un enllaç o si enviem el formulari fent clic a un botó, se’ns mostrarà el missatge, cosa que volem evitar. Això es pot resoldre inhabilitant l’event en cas de fer clic a certs elements:

$('body.protected p.botons input, body.protected a.sense-onbeforeunload', context).click(function () {
  window.onbeforeunload = null;
});

I així de fàcil obtenim el que busquem. Fàcil, oi? I segur que a més d’un li sembla útil, i fins i tot, més que necessari en alguna situació quotidiana.

Recursos

Com fer un plugin per a jQuery. Contingut tabulat en pestanyes

Ramon Vilar Gavaldà — Wed, 22 Jul 2009 18:53:16 +0000

Durant el meu dia a dia professional, treballo (i força) amb jQuery, una meravellosa biblioteca JavaScript (s’entreveuen les meves preferències, oi?). Doncs bé, la segona cosa que cal saber quan s’entra en el món jQuery és desenvolupar, o com a mínim conèixer l’estructura bàsica, d’un plugin.

Per a exemplificar la construcció, crearem un petit giny per a construir contingut tabulat en pestanyes.

Partim d’un fragment HTML com el següent:


  Pestanya 1
  
    ...contingut...
  
  Pestanya 2
  
    ...contingut de la segona...
  
  Pestanya 3
  
    ...i una mica més...

Si ens centrem en el giny, podríem redactar una petita explicació funcional com la següent:

En estat de repòs, es mostren les pestanyes amb la primera activa i només es mostra el contingut relacionat amb aquesta.
Una vegada cliquem a una pestanya, aquesta passa a ser l’activa i el contingut que es mostra passa a ser el relacionat amb aquesta.

Ara només falta traduir això a codi JavaScript.

Comencem creant l’estructura general del plugin:

$('.pestanyes').each(function() {
  ...
});

I les estructures necessàries per a crear el giny. Primer de tot caldrà amagar les capçaleres i el contingut d’aquestes i crear l’estructura per a les pestanyes que a nosaltres ens sigui còmode de treballar-hi. Per exemple una d’ideal seria una senzilla llista

...

Anem a passar tot això a codi JavaScript:

$('div.pestanyes').each(function () {
  // creem una referència a les capçaleres i al contingut de les pestanyes
  var $headings = $('h2', this);
  var $content = $headings.next();

  // amaguem les capçaleres i els continguts
  $headings.hide();
  $content.hide();

  // creem l'estructura de les pestanyes
  var tabHtml = '';
  $headings.each(function() {
    tabHtml += '' + $(this).text() + '<\/li>';
  });

  // i l'afegim al document
  $(this).prepend('' + tabHtml + '<\/ul>');
}

Una vegada creada l’estructura, només queda marcar l’estat inicial amb la primera pestanya i el seu contingut relacionat com a actius:

var $tabs = $('ul.tabs li');
$tabs.eq(0).addClass('active');
$content.eq(0).show();

Ara només ens queda centrar-nos en la interacció amb les pestanyes. Quan un usuari faci clic en una pestanya, cal resetejar l’estat actual (eliminar la marca d’actiu) i marcar la pestanya que s’ha clicat com a activa, juntament amb el seu contingut relacionat.

$tabs.click(function() {
  // eliminem la classe i amaguem el contingut
  $tabs.removeClass('active');
  $content.hide();

  // marquem la pestanya activa i mostrem el contingut que calgui
  $(this).addClass('active');
  var tabIndex = $tabs.index(this);
  $content.eq(tabIndex).show();
});

Si ho posem tot junt, podem veure el resultat i una aplicació a un cas a l’exemple.

Però fins aquí no hem fet res de res per construir un plugin. Posem-nos a treballar-hi.

Adaptació del codi per a ser un plugin vàlid

Quan pensem en crear un plugin jQuery, el que ens ve al cap és crear una funcionalitat reutilitzable dins del domini d’un objecte jQuery, és a dir, estendre l’objecte. Així, si ens centrem en el nostre exemple, la idea és acabar creant un codi tal que per poder crear un contingut tabulat, hàgim d’escriure simplement:

$('div.pestanyes').tabs();

Si el que volem és estendre l’objecte jQuery el que haurem de fer, igual que en qualsevol altre objecte JavaScript, és afegir una nova propietat al seu objecte prototype. Així, una cosa d’aquest tipus seria vàlid:

$.prototype.tabs = function () {
  // el nostre codi
}

Però si hagués decidit fer-ho així, ja s’hauria acabat l’entrada, i aquesta no és pas la idea.

Si mirem les primeres línies de la biblioteca jQuery, podem veure la creació d’un alies força interessant:

jQuery.fn = jQuery.prototype

Així, si volem usar aquesta notació, podem ampliar directament l’objecte tot fent:

$.fn.tabs = function () {
  // el meu codi
  return this;
}

S’ha afegit el retorn del propi objecte per a poder permetre l’encadenament de crides:

$('#element')
  .tabs()
  .mesCoses();

El plugin que estem construint és força senzill, però què passaria si tinguéssim variables globals, funcions auxiliars i demés? Alguna cosa com aquesta:

var foo = 0;
$.fn.myPlugin = function () {
  foo += 5;
  myMethod();
  return this;
}
function myMethod() {
  ...
}

Amb aquest escenari, algú sense gaires llums (o amb ganes de tocar la pera) podria usar el plugin des la següent forma (i des de l’espai global de noms):

var myMethod = 'bar';
$('#element').myPlugin();

Però per sort, nosaltres tenim un as sota la màniga anomenat closure. Així, podem englobar tot el codi del nostre plugin dins d’una funció anònima:

(function () {
  var foo = 0;
  $.fn.myPlugin = function () {
    foo += 5;
    myMethod();
    return this;
  }
  function myMethod() {
    ...
  }
}) ();

Sembla que tot ja està fet, no? Queda un últim punt. Per a assegurar la compatibilitat amb d’altres biblioteques, no podem usar l’àlies de l’objecte jQuery $ així com així, sinó que hauríem d’usar jQuery com a mètode d’accés a l’objecte. Però això no és gaire còmode, no? Tranquils! Aprofitant que tenim la funció anònima englobant el nostre codi, podem crear un àlies segur per a jQuery fàcilment passant-lo com a paràmetre d’aquesta:

(function($) {
  ...
})(jQuery);

Ara ja estem en condicions de crear el nostre primer plugin. Podeu veure el codi resultant a l’exemple.

Ampliacions

Una vegada que tenim el plugin funcionant, ens podem centrar en fer-lo més real. El primer que ens podem preguntar és: què és un plugin sense opcions? Doncs si en volem, només cal donar-li un parell de voltes i fet.

Considerem dues opcions de configuració:

Pestanya activada per defecte, que serà un enter (per defecte 0) que indicarà l’index de la pestanya (activatedIndex)
Efecte visual al canviar de pestanya, que serà el nom d’una funció (per defecte null) dins l’espai de noms de l’objecte jQuery (animation)

I si ho afegim al codi que ja tenim:

$.fn.tabs = function (options) {
  var config = $.extend({
    activatedIndex: 0,
    animation: null
  }, options || {});

  ...
}

Ara el mètode tabs accepta un paràmetre que és un objecte de configuració. S’usa el mètode $.extend per tal d’estendre un objecte amb els valors per defecte amb els passats com a paràmetre.

Ara, els únics canvis que cal fer són força trivials. Pel cas de l’índex de la pestanya a activar:

// marquem la pestanya i el contingut desat a la configuració com actiu
var $tabs = $('ul.tabs li');
$tabs.eq(config.activatedIndex).addClass('active');
$content.eq(config.activatedIndex).show();

I pel cas de l’animació al canviar de pestanya:

if(config.animation) {
  $content.eq(tabIndex)[config.animation]();
} else {
  $content.eq(tabIndex).show();
}

I per acabar, només falta veure-ho tot ajuntat i funcionant al seu exemple corresponent.

Fonts

No creieu pas que sóc un geni. Ni molt menys. Aquesta entrada està basada en una de molt millor del meu amic Choan, el qual em va iniciar en el meravellós món del JavaScript. Només he volgut explicar-ho des de la meva òptica, usant alguna que altra alternativa de notació i amb un exemple ben diferent.

Cal deixar ben clar que això no és pas un plugin oficial ni res per l’estil. El codi el teniu disponible per tocar i jugar, però no s’acceptaran cap tipus de culpa per l’ús d’aquest en algun entorn productiu.

El que sí que s’accepten són notes, comentaris i tot el que vulgueu fer sobre el que aquí s’ha exposat.

Problemes amb l’append de jQuery a Internet Explorer

Ramon Vilar Gavaldà — Mon, 25 May 2009 11:00:44 +0000

De tots és bviagra conegut que ser el més popular de la classe no vol dir pas que siguis el més bo, ni el més educat, i encara menys, el més efectiu. Doncs això és principalment el que li passa a l’Internet Explorer.

Si treballem amb JavaScript d’una forma intensiva és normal usar alguna biblioteca que ens ajudi en algunes tasques del dia a dia d’interacció amb DOM, events i demés; i una de les biblioteques més populars actualment és jQuery (que és també la que uso jo normalment als meus projectes).

El cas que ens ocupa és una de les funcions de principals de manipulació del DOM: append. Imaginem-nos que tenim un codi semblant a aquest:

$('div.el-que-interessa').append('');

Doncs bé, des de Firefox, per exemple, l’element /span sí que serà afegit, però en canvi a Internet Explorer no ho serà pas. Aquest darrer requereix que el fragment que es vulgui afegir mitjançant aquesta funció sigui XHTML. Així hauria de quedar una cosa com aquesta:

$('div.el-que-interessa').append('<\/span>');

No sembla pas una cosa gaire complexa de detectar i solucionar, oi? Doncs donem-li una volta més de rosca…

Imaginem-nos que volem afegir opcions a una llista desplegable de forma dinàmica, i tenim un codi com el següent:

$.each(opcions, function(clau, valor) {
    $llista.append(new Option(valor, clau));
});

És correcte o no és correcte aquest codi? Per saber-ho, hauríem de modificar la pregunta i fer-la més o menys així: quin HTML ens retorna el constructor de la classe Option?

var opt = new Option('Catalunya', 'CT');
// opt:

Doncs bé, com podeu veure, el codi retornat per l’objecte no és pas en format XHTML, i per tant, no funcionarà a Internet Explorer. Per aconseguir el correcte funcionament, no tenim cap més opció que inserir l’opció en format text:

$.each(opcions, function(clau, valor) {
    $llista.append('