jQuery e Prototype: librerie in conflitto
Oggi ho finalmente scoperto che cosa mi impediva di utilizzare alcune funzioni di contorno contemporaneamente per abbellire graficamente il blog con effetti molto web duepuntozero. Veniamo al dunque perchè è già tardi e l’acqua è poca e la papera non galleggia.
Come avevo anche scritto tempo fa ogni tanto le foto che inserisco nei post sono visualizzabili tramite effetto Thickbox. Questo script per ingrandimenti e finestre modali AJAX-powered ha il grande pregio di utilizzare una libreria javascript molto leggera che si chiama jQuery ma che permette di ottenere gli stessi effetti che si possono avere con il più famigerato Lightbox che utilizza al contrario diverse librerie molto più pesanti e nello specifico Prototype e Scriptaculous. Così posso avere fantasmagorici effetti web duepuntozero ed contemporaneamente pagine da caricamento più rapido per venire incontro a coloro che non hanno una connessione ad internet a banda larga.
L’altro giorno leggendo un post di Vittorio che a sua volta citava Giovy che a sua volta ringraziava Davidonzo, noto l’uscita di un nuovo plugin per Wordpress, Share-This, che permette di nascondere tutte le classiche iconcine che fino a poco tempo fa erano presenti al piè di ogni post dietro l’unica che ora vedete a fianco della scritta condividi.
Se sei un attento lettore del blog ed un assiduo fruitore dei network per il social bookmarking avrai notato che fino a oggi prima delle ore 17 cliccando su quei link venivi reindirizzato ad una nuova pagina da cui potevi poi andare ad inserire il post sul servizio tra quelli a disposizione che più ti era congeniale (lo stesso problema che a quanto pare ha Antonio Sofi). Ora invece noterai che come clicchi sul link ti compare un gradevole popup stile web duepuntozero come sui siti degli amici che ho citato sopra.
Il problema era dovuto al fatto che il mio tema che è una versione customizzata di K2 ed il plugin Share-This hanno bisogno per il loro funzionamento della libreria Prototype che non va proprio d’accordo con jQuery. La soluzione più semplice era rinunciare a Thickbox per Lightbox, però quest’ultimo oltre ad essere più pesante non mi piace neanche molto. Quindi se anche tu hai lo stesso problema di far convivere le due librerie Prototype e jQuery per ora incompatibili l’una con l’altra prendi carta e penna e segnati quanto segue.
Caricando nel seguente ordine i due script e utilizzando il seguente codice:
<script type="text/javascript" xsrc="jquery.js"></script> <script type="text/javascript"> JQ = $; //rename $ function </script> <script type="text/javascript" xsrc="prototype.js"></script>
Così facendo ed andando successivamente a sostituire tutte le chiamate alle funzioni messe a disposizione dalla libreria jQuery utilizzando il suffisso JQ al posto del $ come per esempio potete vedere in questo pesso di codice:
<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jQuery!");
$("test_prototype").innerHTML="this is Prototype!";
});
</script>
e come normalmente avviene, avrete risolto il conflitto e le due librerie potranno coesistere.
Bella mossa, ora mi bookmarko il tuo post, non si sa mai
Certo che è una bella invenzione jQuery, eh? io me ne sono innamorato!
C’è voluto un pò di tempo ma ce l’ho fatta a trovare il problema.
Speriamo che possa servire a qualcuno.
Un programmatore di mia conoscenza sta cercando un modo per far convivere queste 2 + tutte le altre: moo, script.aculo.us, ecc…
Non so se ci riuscirà…
Ciao! Non riesco a capire perchè share this funzioni benissimo nel singolo post ma mi faccia un casino in home page. Potete darci un’occhiata? Si vede subito che non visualizza il logo e che fa comparire i social sites alla fine…scrollate fino in fondo: http://www.bianchimarco.com.
Grazie!!!
@Marco: ma t non carichi il javascript Prototype.js per forza che non funziona!!!
Leggiti bene il file su come installare il plugin e vedrai che c’è scritto che non hai una versione di Wordpress > 2.1 devi copiare il file prototype.js presente nel pacchetto del plugin nella cartella wp-includes/js/ della tua installazione di Wordpress.
ciao, seguo iltuo ottimo blog e ti vorrei chidere aiuto per far funzionare share-this perche’ anche a me finisce a fine pagina (ma io il prototype.js lo carico)
grazie per una tua risposta
Massimo
ciao davide,scusa il disturbo…ma anche io riscontro seri problemi con il funzionamento di share-this sul mio sito. Ho seguito tutto il readme…ho anche uploadato il file prototype.js pur avendo wordpress 2.1.1 installato e non ho nessuna libreria JQuery.
Il mio sito è http://www.networkingblog.it.
Boh, qualche consiglio?
Era già previsto da Jquery. jquery è progettato per essere assolutamente trasparente.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
@Stefano: Se jQuery non fosse trasparente non sarebbe possibile la coesistenza con altre librerie come Prototype.
Adesso comunque è stata adottata per gli effetti Ajax del pannello di amministrazione di Wordpress 2.2 (a discapito proprio di Prototype) e quindi gli sviluppatori di plugin come Share-this dovranno correggere i loro lavori.
salve davide, scusa ma non riesco a capire: dove devi inserire i codici che hai segnalato?
@Loaw:
Sia Jquery che Prototype da quando ho scritto l’articolo hanno subito numerosi aggiornamenti e quindi il problema descritto potrebbe essere stato risolto.
Comunque il codice riportato nell’articolo, come ogni codice javascript da eseguire in una pagina web, va riportato tra i tag <head></head> della pagina html
Ciao Davide!
Io uso wp 2.3.1, e non c’è traccia del js jquery. Tuttavia, nel mio share-this persiste il problema dell’apertura di una nuova pagina invece della comparsa del gradevole popup
hai una minima idea su come potrei risolvere il problema?
grazie in anticipo
@GiH
Sembra che hai risolto il problema perchè a me non apre una nuova pagina ma visualizza il pop-up con effetto Ajax
L’avevo letto tempo fa questo post, ma ora mi è tornato davvero utile.
Grazie!!!
Grandissimo!
Ho trovato questo articolo per caso…
con questo suggerimento mi hai salvato la vita!
Ragazzi non capisco proprio perché sul sito http://www.givumbria.it sharethis 1.4 mi funziona benissimo. Invece su http://www.dipmat.it no…
L’unica cosa che c’è di diverso è il tema perché per il resto è la stessa v. di wp!! Aiuto!!!!!!
addirittura non capisco perché, lo stesso sito, http://www.dipmat.it dove sharethis 1.4 non funziona in locale funziona!! Ma che è sta storia?
qui si parla della libreria prototype.js….
Dopo aver installato la versione 1.4 di share this ho notato un grosso incremento nella richeista di banda….
Ho analizzato un po le pagine del mio sito durante il caricamento ed ho scoperto che share this carica una libreria javascript pesante ben 97kb e trovo la cosa eccessiva ed onerosa…
La libreria caricata si chiama prototype.js
E’ impossibile far funzionare share this senza questa pesantissima libreria?
grazie
@sdamy
Si è impossibile far funzionare Share-This senza Prototype. Dovresti prendere in considerazione la conpressione via Gzip della libreria e non reinviarla agli utenti che l’hanno già scaricata ottimizzando Apache (via htaccess e mod_expire)
Grazie per la risposta…
Parlando di plugin più in generale wordpress dovrebbe testare la pagina prima di caricare tuttle le css e librerie degli eventuali plugin utilizzati, per esempio se utilizzo un sondaggio con il plugin democracy in una sola pagina e il mio blog è composto da 2.000 pagine perchè caricare in ogni pagina il css e codice javascript per il sondaggio che viene usato solo in una pagina?
cforms II è uno dei pochi plugin che ho visto che riesce a gestire la cosa… con l’opzione “Enabling cforms for specific pages”.
ciao!
Salve a tutti, ho da poco più di un mese un blog sul quale avevo installato ShareThis in inglese. Ho deciso giusto qualche giorno fa di provare questo modificato in italiano, ho avuto problemi con il popup, ho cercato di inserire il codice per la correzione ma continua a non funzionare. Forse perché non ho capito bene dove incollarlo? Parlate di tag e gli unici che ho trovato sono quelli della header del mio template.
L’ho quindi incollato là ma non va.
Gentilmente potreste darmi una mano? Grazie in anticipo per l’aiuto.
P.S. Utilizzo Wordpress 2.5.1
Scusate ho visto che i tag head con i relativi apici di apertura e chiusura non vengono visualizzati qua nei commenti. Con riferimento al mio post precedente intendevo dire “i tag head sono presenti solo nell’header del mio template”.
Ciao e grazie.
Trackback/Pingback
WordPress - Share This in italiano con Segnalo e OKNOtizie…
Stana la vita a volte. Cazzeggiando per blog, martedi mattina vedo che molti usano il plugin …
Share This per tutti…
Come preannunciato, ecco Share-This 1.4 in Italiano per gli utenti Worpdress. Tutte le parti sono state completamente tradotte. Anche quelle relative alla visualizzazione della pagina intera (quando non si apre il popup, magari perchè il client ha jav…
[...] Il plugin è totalmente “XHTML valid”, ed è semplicissimo da installare. Estraete l’archivio e caricate la directory nella cartella /wp-content/plugin/ del vostro WordPress e attivate il tutto dal pannello di controllo. Se al click su “Condividi” non si apre il popup, ma venite rimandati ad una pagina nuova per il bookmarking è perchè, molto probabilmente, avrete un conflitto fra librerie javascript. Se usate la libreria jQuery, ed incorrete nel problema descritto, consultate il blog di Davide Salerno che è riuscito a risolvere l’inghippo. [...]
[...] Il plugin è totalmente “XHTML valid”, ed è semplicissimo da installare. Estraete l’archivio e caricate la directory nella cartella /wp-content/plugin/ del vostro WordPress e attivate il tutto dal pannello di controllo. Se al click su “Condividi” non si apre il popup, ma venite rimandati ad una pagina nuova per il bookmarking è perchè, molto probabilmente, avrete un conflitto fra librerie javascript. Se usate la libreria jQuery, ed incorrete nel problema descritto, consultate il blog di Davide Salerno che è riuscito a risolvere l’inghippo. [...]
[...] nessun tipo di problema!! però in rete o letto di persone che anno avuto questi problemi,perciò a questo indirizzo trovate il modo per risolverlo. Comunque riccordatevi che se avete una versione di WP molto vecchia,dovete [...]
[...] JQuery, Davide Salerno, Filippo Pisano « Addio infanzia felice e spensierata, ecco le nuove generazioni Mandare [...]
[...] javascript. Se usate la libreria jQuery, ed incorrete nel problema descritto, consultate il blog di Davide Salerno che è riuscito a risolvere l’inghippo. Scarica la versione per WordPress (licenza LGPL). La versione per dBlog è simile, l’unica [...]
Lascia un tuo commento!
Rimani aggiornato
Abbonati ai miei Feed RSS
Articoli | Commenti
oppure ricevi gli aggiornamenti via e-mail:
Scopri cosa sono e come usare i Feed RSS
La tua pubblicità qui? Scopri come...
In prima pagina
Commenti Recenti
Scusate ho visto che i tag head...
Salve a tutti, ho da poco più...
non riesco ad eliminare le foto...
ho capito il problema per cui non...
Consiglio a Samuele di informarsi prima di...
Ciao grazie Davide e a tutti quanti, scusatemi...
ciao, scusate un a ingo, ho recuperato...
bè mi auguro che le cose positive...
ciao Davide, sono uno studente di Ingegneria...
Ciao a tutti,io ho un problema:faccio l'installazione...
Meta
Scelti a caso
Più commentati
Qualche scatto
Tutto il materiale è coperto da Licenza Creative Commons | Per maggiori informazioni.
Articoli (RSS) | Commenti (RSS) | Torna su