jQuery e brTip

In un progetto di un annetto fa avevo usato brTip per fare dei mouseover per visualizzare alcune informazioni. L'avevo già modificata per permettere di caricare via ajax il contenuto del tooltip, ma ogni tanto aveva un comportamento anomalo: sporadicamente mi spariva l'attributo "title" dell'elemento a cui avevo associato il brTip e da cui prende il testo da caricare nel tooltip stesso. Ebbene, era una cosa che non avevo mai debuggato seriamente, invece oggi mi sono intestardito, visto che volevo fare un po' di manutenzione ho dato un'occhiata, ed ecco il risultato:

il problema è che nel momento in cui si associa all'evento mouseover
svuota l'attributo title dell'elemento dell'albero dom a cui è associato.


self
.mouseover(function()
{
// Set content.
opts.txt = self.attr('title');
self.attr('title', '');

// Create the box.
_create();
})


Probabilmente serve a non far comparire anche l'attributo title per esempio sulle immagini..
Però in alcuni casi dovevo forzare la scomparsa degli eventuali popup presenti, questo comportava la non esecuzione dell'evento mouseout, che risistema il valore del title.. per ora ho aggiunto un flag per esplicitare di lasciare il title, in modo da essere compatibile con la release ufficiale.. però è una soluzione temporanea e non troppo elegante

Comunque generale questa plugin non mi è piaciuta tanto, ma quando avevo cercato era tra le più flessibili per creare tooltip con jQuery..

jQuery plugin uiTableFilter e piccola modifica

Poco fa stavo usando questa ottima plugin di jquery: uiTableFilter.

Dandogli in pasto una tabella, ed eventualmente il testo dell'header () relativo alla colonna scelta, esegue una ricerca semplicissima tra le righe, nascondendo quelle che non contengono il testo voluto, eseguendo quindi in maniera rapida un filtro.

L'ho trovata molto semplice e dal codice leggibilissimo, per questi motivi ho scelto di utilizzarla.
Però la tabella su cui l'ho applicata è abbastanza complessa, per cui ho messo due input testuali, per filtrare su due colonne differenti. Il problema che si è subito evidenziato è che (giustamente) il filtro su una colonna non considera il filtro sull'altra. Il motivo è semplice: se una riga ha il match con la ricerca che ho effettuato, chiama la funzione show() di jquery, mentre se non contiene il testo cercato chiama una hide(), non avendo quindi modo di capire se la riga era nascosta per un testo cercato precedente oppure per il filtro sull'altra colonna. Ecco quindi come ho risolto:

Ecco il diff con la versione ufficiale

21c21
< jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
---
> jQuery.uiTableFilter = function(jq, phrase, column, dontUnhide, ifHidden){
28c28
<   var success = function(elem) { elem.show() }
---
>   var success = function(elem) { if(!dontUnhide) elem.show() }

Ho cambiato la signature del metodo aggiungendo un parametro "dontUnhide" che permette di specificare, in pratica se il campo su cui si sta filtrando è primario o meno. Quindi di default (non passando il parametro o dando valore false) si comporta normalmente, quindi è un campo primario. Passando invece il flag impostato a true, si comporta in modo da considerare il campo secondario, non chiamando mai lo show(), ma nasconde comunque le righe che hanno passato il filtro primario ma non passano quello corrente.. il risultato è l'effetto "AND" che mi serviva.. e l'utilizzo che ne faccio è il seguente:

$(document).ready(function() { 
  var theTable = $('table#filtered');
  
  function realFilter() {
    $.uiTableFilter( theTable, $("#filter").val() , 'Site Name');
    $.uiTableFilter( theTable, $("#filterCity").val() , 'City', true);
 }
  $("#filter").keyup(function() {
    realFilter();
  })

  $("#filterCity").keyup(function() {
    realFilter();
  })
}); 

Al caricamento della pagina associo le funzioni alle due caselle di testo, uno per filtrare su Site Name e l'altra su City. Ma in realtà al keyup su qualunque delle due, la funzione è la stessa, che filtra prima sul Site Name, poi sulla City (flag dontUnhide = true).

L'unica cosa che non mi piace tanto è il giro su dontUnhide.. che è macchinoso pensare quando il flag per non "non nascondere" vada impostato a false.. mi sarebbe piaciuto usare un flag tipo "primary", ma in javascript preferisco sempre avere flag booleani il cui valore false causi il comportamento "normale", in modo che siano non obbligatori.

Ho appena scritto al creatore della plugin.. chissà che non possa tornare utile a lui o ad altri..

JQuery + thickbox con url dinamici

Ormai da tempo mi affido a jQuery per rendere più dinamica l'interfaccia grafica e non preoccuparmi della portabilità, dopo aver perso il sonno causa browser assolutamente non standard (che non nominerò, ma già sapete..).
Oggi mi trovo a dover sostituire, in un sito abbastanza recente, un parte fatta a popup con una più elegante e moderna versione ajax con tanto di thickbox, plugin che ho usato già per altri lavori.

Il problema è il seguente: allo stato attuale, all'href del link è associato una funzione javascript (selectSite()) che carica parametri in base a selezioni fatte dall'utente in diverse parti della pagina, crea un url con questi parametri e apre un "simpatico" popup con la pagina generata dinamicamente.

Ora, se attivo thickbox direttamente su questo link, esso cambierà l'href associato.
Il risultato è che se poi si cambiano i parametri nel resto del form, un click sul link genererà comunque la richiesta con i vecchi parametri. All'inizio ho pensato a come associare una callback alla chiusura della finestra thickbox per rimettere di nuovo la funzione "selectSite()" all'href del link in questione. Ma mi sembrava un po' macchinosa, soprattutto contando che esistono altri link del genere, con funzioni simili ("selectService()", "selectSupplier()".. etc).

Allora ho pensato di indirizzare il mio refactor in una direzione differente: lasciare intatto il link, ma usarne uno di appoggio fatto apposta per aprire il thickbox e niente più.
Quindi ho creato un link vuoto ed invisibile () ed una funzione a cui si appoggiano selectSite e le sue sorelle:

function loadAjaxContent(url) {
var urlPar = url + "&height=500&width=800";
var nodeId = '#HiddenLink';
if(!$(nodeId).hasClass( "thickbox" )) {
  $(nodeId).addClass("thickbox");
  tb_init('a.thickbox');
}
$(nodeId).attr("href", urlPar);
$(nodeId).click();
}

Vediamo cosa fa nel dettaglio:

* prepara l'href a partire dall'url (che prima veniva richiamato come popup)
* cerca il link nascosto; se è la prima richiesta aggiungo la classe "thickbox" al link nascosto ed inizializzo thickbox, questo perchè la pagina stessa viene chiamata attraverso ajax e messa dentro un div con innerHTML, quindi l'unico modo per inizializzare thickbox è lanciare l'init dopo il caricamento del contenuto (una callback sull'avvenuto inserimento) oppure on-demand.
* aggiorno l'href del link nascosto e lancio un click su questo.

In questo modo l'href viene aggiornato costantemente, i link non vengono toccati ed il mio refactor va a sostituire i window.open(url) con loadAjaxThickbox(url).. non male, direi..
Ora miglioro alcune cose:
* potrei creare direttamente il link con id HiddenLink in questa funzione
* lancio tb_init('a#HiddenLink') per non appesantire nel caso ci siano diversi thickbox nella pagina
* aggiungo altri parametri per rendere più flessibile la gestione della finestra (altezza, larghezza, modal..)

JQuery

Oggi vi parlo brevemente di JQuery, una libreria javascript che ho cominciato ad utilizzare ieri. Non ho ancora capito bene i limiti e le eventuali implicazioni dell'utilizzo di questo componente, però al momento trovo estremamente interessante avere un modo standard per navigare nella struttura DOM di una pagina HTML con poche chiamate javascript con una sintassi comunque comprensibile (certo, un po' più concisa, ma leggibile, con delle conoscenze di base di html). Ieri ne sono venuto a conoscenza e subito ho integrato in una mia applicazione web due plugin che ne fanno uso.
E qui arrivo ad un punto estremamente interessante: infatti sul sito c'è un elenco di plugin ufficiali, anche se secondo me non è il termine giusto. Infatti non sono delle estensioni, ma dei componenti che fanno uso di questa libreria.. ma vabbè, ognuno può pensarla un po' come vuole..

Con la sola inclusione di due componenti del genere, la mia web app ha cambiato volto, con un'interfaccia più comprensibile, più rapida e più accattivante.
Ormai, secondo me, ha poco senso sviluppare applicazioni desktop se si possono fare applicazioni web così belle e dinamiche.