jQuery + Prototype: come farli coesistere
Mi sono chiesto da parecchio tempo, se fosse possibile far coesistere i due framework jQuery e Prototype nella stessa pagina web.
Dopo svariate ricerche, sono riuscito a trovare risposta: Sì è possibile.
Tramite alcuni piccoli cambiamenti, è possibile far coesistere i due framework. Il problema, principalmente è la variabile “$” che è dichiarata, per entrambi, come funzione di default.
Per ovviare al problema, è possibile utilizzare questa sintassi:
1. Nell’head della pagina, includere “prima” lo script di jQuery:
<script type=”text/javascript” src=”js/jquery-1.2.6.pack.js”></script>
2. Prima dell’inclusione di prototype dichiarare una variabile a piacere (per es. JQ) come funzione jQuery tramite l’apposita funzione jQuery.noConflict();:
<script type=”text/javascript”>
JQ = jQuery.noConflict();
</script>
3. Successivamente, includere prototype:
<script src=”js/prototype.js” type=”text/javascript”></script>
Il testo completo:
<script type=”text/javascript” src=”js/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript”>
JQ = jQuery.noConflict();
</script>
<script src=”js/prototype.js” type=”text/javascript”></script>
In pratica, utilizziamo la variabile JQ come funzione di jQuery, e prototype come sempre $.
Per utilizzare jQuery, per esempio, possiamo richiamarlo così:
JQ(document).ready(function() { alert(“jQuery funziona correttamente!”); }
Mentre per prototype:
alert(“Anche prototype funziona correttamente! Ecco un esempio prendendo un valore da un campo input: “+$(‘id_form’).getValue());
Lazarus
Ti Adoro!!!!!
Grazie mi hai risolto il problema, io adoro prototype perche è molto semplice da usare ma i plug in di jquery sono fenomenali quindi volevo unire le due cose ma non riuscivo a venirne a capo tu mi sei stato molto utile..
Grazie ancora Nicola
morphey
Ciao, sono contento che sei riuscito a risolvere
elisa
Ciao,
ho seguito le tue indicazioni per poter integrare jquery e prototype ma ricevo questo errore:
innanzitutto complimenti per questo tutorial
JQ is not defined
e mi porta a questa riga:
JQ(document).ready(function () {
Sto cercando di integrare la galleria lightbox e un menu animato fatto con jquery.
Mi potresti dare una mano a farli coesistere?
Ti ringrazio tanto,
elisa
morphey
ciao, probabilmente il pluin che cerchi di far funzionare (lightbox) utilizza la variabile di default per jQuery (parliamo del dollaro $).
Ho avuto lo stesso problema anche io con un altro plugin per jquery, ho fatto un massreplace di questa variabile, mettendo il JQ
Giorgio
ciao, e grazie delle dritte…
chiedevo se si poteva fare l’inverso… cioè modificare la variabile $ di prototype e lasciare invariato jQuery… in pratica io prototype lo uso solo per LightView che mi piace molto più di Lightbox, quindi mi sarebbe più comodo modificare quello, lasciandomi più libero con jQuery… se sì, come si fa?
Pingback: Foto rotanti per portfolio - Mr. Webmaster Forum
Francesco
ottimo. grazie per la segnalazione!
ma si potrebbe fare il contrario? ossia modificare le chiamate di prototype?
Emanuele
Salve, non c’è un modo per cambiare la variabile a prototype piuttosto che a jquery??
Io uso principalmente jquery, prototye invece lo uso solo in una pagina, mi è più comodo cambiare a prototype piuttosto che a jquery che invece uso dapertutto.
Vi prego aiutatemi.
grazie
morphey
Ciao,
purtroppo ancora non si è trovata la soluzione in quanto JQuery lo prevede nel codice di cambiare la variabile principale tramite la funzione jQuery.noConflict().
Prototype purtroppo non lo prevede.
Vincenzo
ciao,
io nn ci sono riuscito anche perchè ho pochissima esperienza.
Questo è quello che ho nell’head:
JQ = jQuery.noConflict();
come devo fare?
grazie mille anticipatamente
morphey
Ciao,
hai messo JQ = jQuery.noConflict(); “dopo” gli include javascript?
karlcool
Ciao,
attento ai doppi apici “word style” nella definizione della variabile!!
Leftist
Ciao Morphey, complimenti per il blog ma sopratutto per la dritta, anche se a me proprio non vuole funzionare.
Ti posto come faccio e magari puoi darmi un consiglio (lo spero proprio):
JQ = jQuery.noConflict();
In praticca mi funziona solo il prototype ma non la jquery!
Ci stò perdendo l’anima please aiutami.
Grazie 1000
morphey
Ciao @Leftist,
la funzione “JQ = jQuery.noConflict();” la devi mettere dopo l’inclusione di jQuery ma subito prima dell’inclusione di prototype.
Leftist
Grazie Morphey per la tua risposta, ma ho seguito alla lettera il tuo esempio:
ho in primis incluso jquery.js con
Ho inserito il jQuery.noCnflit
e poi richiamato il prototype.
Spero di aver capito bene cosa volevi dirmi.
Leftist
Scusatemi ma rileggendo ho visto che il blog non scrive lo script type=”text/javascript” src=”jquery.js” tppabs=”jquery.js
Spero che intendevi dirmi questo quando parlavi di inclusione.
Perdona la mia ignoranza in materia
morphey
Si esatto, comunque ok. Ma l’errore che riscontri esattamente qual’è?
Con firebug su firefox, nella console, che errori js riscontri?
Leftist
L’errore e che ho funziona il menù (Prototype) oppure una piccola animazione (ora è una questione di principio) gestita, invece, da jQuery.
L’errore è sia su firefox e sia su IE, uguale su chrome.
Ovviamente stò provando il sito in locale, potrebbe essere questo un problema??
Grazie
morphey
Si ma così non riesco a capire molto
Prototype e jQuery devono venire gestite in due modi diversi, in particolare jQuery deve essere richiamata solo dalla variabile $JQ .
Se stai usando librerie (plugin) esterni a jQuery è probabile che l’inclusione di quelle librerie fanno riferimento alla variabile $ e non a $JQ: purtroppo quelle bisogna correggerle a mano per farle funzionare con $JQ.
Leftist
Spero che tu abbia ancora un pizzico di pazienza,
ho provato a modificare nel file jQuery dove c’era $ in $JQ,
ad esempio… (function(){var _jQuery=window.jQuery,_$=window.$;
l’ho modificato con (function(){var _jQuery=window.jQuery,_$JQ=window.$JQ;
successivamente ho inserito il no.Conflict:
$JQ = jQuery.noConflict();
ma nulla
Continua a funzionare il solo prototype.
In effetti ho altri file js inclusi, ma modificando a questo punto la jQuery…..
morphey
Ciao,
credo che non ci siamo
Nell’head, prima di tutto devi includere lo script di jquery.
Subito dopo dai “una sola volta” $JQ = jQuery.noConflict();
Successivamente includi lo script di prototype.
Da questo momento, tutte le chiamate a jQuery devono essere fatte con la variabile $JQ, mentre le chiamate a prototype devono essere fatte con la variabile $ .