En aquest article explique com he aconseguit reemplaçar text, etiquetes HTML o qualsevol codi escrit al vol de manera dinàmica durant la càrrega inicial de la pàgina.
A la feina he estat pensant en afegir una nova funcionalitat a un llistat de tipo SELECT on tenim tots els municipis de la província de Castelló, i tenia l'opció de tocar el codi PHP de la pàgina, però això comporta que si fem una nova actualització, hauré de traslladar i readaptar el codi a la nova versió. I vaig estar pensant en una solució que siga simplement afegir un fitxer novaFuncionalitat.js al projecte web i que aquest modifique i afegisca a la pàgina el codi que vull fer de manera transparent i al vol quan l'usuari accedisca a la pàgina i la carregue.
Per a començar, un primer exemple podria ser aquest: que puguem manipular tot el contingut d'un determinat div o un span (per exemple on la seua classe es diu "ElMeuExemple") i modificar tot el text o imatges que continga amb:
$(document).ready(function(){
var nouContingut = 'Text nou';
$(".ElMeuExemple").replaceWith(nouContingut);
});
I ara el truc que he après avui al matí quan pensava una solució per a un llistat de més de 120 municipis i unes quantes mancomunitats: si per exemple tenim una taula o un div o un objecte de formulari i volem manipular-lo, podrem aconseguir:
- Estil CSS personalitzat al vol.
- Una imatge personalitzada al vol.
- Un event: onClick, onMouseOver, onChange, etc. per millorar funcionalitats de la web.
- Canviar-li el nom (name="un_nou_boto") per aconseguir alguna nova funcionalitat.
- Afegir una clase o un id nou a un objecte HTML del DOM de la web.
- La mida del input text a un formulari (size="25").
- Canviar totes les paraules i, on deia "tots" que diga "tots i totes".
- Etc, etc, etc.
Promet, no? doncs bé, ací a continuació et mostre un exemple on vaig a modificar tots els H1 per un H2 amb:
function funcio_primera(){ }
...
// Quan arranca la pagina canviarem els H1 per H2 al vol de manera dinàmica
if (document.addEventListener){
window.addEventListener('load',funcio_primera,false);
...
$(document).ready(function(){
var s = $('body').html();
s = s.replace(/H1/g,'H2');
$('body').html(s);
});
...
} else {
window.attachEvent('onload',funcio_primera);
}
Ara, per a que veges més possibilitats de canviar etiquetes HTML o text al vol, has de saber que també podem modificar moltes línies al vol, no nomès una com a l'exemple anterior.
Per exemple, imaginem un cas hipotètic i suposem que treballem d'informàtics per a la Casa Reial d'Espanya i que som molt molt molt malfainers. De sobte, un dia qualsevol, el nostre cap - un tal Felip - ens ha dit que cal publicar un comunicat oficial a la pàgina web. Cercant per la base de dades, veiem que a l'antiga web de la Casa Reial, hi ha un antic comunicat de l'any 1999 i hem pensat de "reciclar-ho" agafant la informació però mostrant les dades de les persones actuals.
Doncs bé, com que som molt molt molt mailfainers, hem decidit que en aquest cas crearem un fitxer comunicat2019.js amb les línies:
s = s.replace(/table/g,'div');
s = s.replace(/imatge_reis_1999.gif/g,'imatge_reis_2019.jpg');
s = s.replace(/Juan Carlos I/g,'Felipe VI');
s = s.replace(/Sofia/g,'Leticia');
s = s.replace(/enero/g,'octubre');
s = s.replace(/1999/g,'2019');
I ja tindrem el comunicat oficial actualitzat. Si et fixes en l'exemple anterior, hem canviat les taules per divs (les taules ja no es recomanen per a maquetar els frontends per molts motius), hem canviat el nom del nou Rei i Reina, també hem canviat la imatge que volem que aparega i finalment també hem canviat la data del comunicat.
I ja ho tenim, sense necessitat d'haver modificat l'HTML o el PHP del gestor de la web, ja hem modificat un comunicat actualitzant la informació i la presentació.
Doncs un exemple com aquest el podem fer a la nostra web personal i fer canvis a imatges o a etiquetes HTML de manera dinàmica (per exemple ficar un logo distint els dies de nadal, o a una data important com fa Google als seus 'Doodles').
Happy Hacking.
