Conflict jQuery si Prototype in aceeasi pagina

In acest articol vom trata problema care apare atunci cand incercam sa folosim mai multe librarii JavaScript in aceeasi pagina. Problema concreta de care m-am lovit eu a fost folosirea librariilor jQuery si Prototype in aceeasi pagina.

In mod normal, este bine sa alegem o librarie JavaScript si sa o folosim pe aceea pentru tot ceea ce vrem sa implementam in pagina. Da, dar ce facem atunci cand lucram pe codul altuia, sau cand libraria care era folosita inainte nu ne satisface nevoile? Folosim solutia pe care o cunoastem si care stim ca ne rezolva problema.

In cazul meu, lucram intr-o pagina care avea un DatePicker implementat in Prototype. Aveam nevoie sa implementez niste apeluri AJAX si am ales solutia jQuery. Problema era ca de fiecare data cand testam cod-ul imi intorcea o eroare care imi spunea ca nu gaseste elementul selectat. Mai tarziu am observat ca nici DatePicker-ul nu mai functiona.

Asa ca am investigat. Am aflat ca cele doua librarii nu pot coexista in aceeasi pagina. Acest lucru se intampla deoarece jQuery si Prototype folosesc selectori similari care inta in conflict atunci cand sunt folositi pe aceeasi pagina.

// Selector Prototype
function foo() {
	element = $('divContainer');
}

// Selector jQuery
function foo() {
	element = $('#divContainer');
}

Dupa cum puteti vedea, selectorii sunt de asa natura, incat se "incurca" unul pe celalalt. Atunci cand Prototype vede $('#divContainer') intoarce o eroare, pentru ca nu-l recunoaste ca fiind un selector valid. La fel se intampla si atunci cand jQuery incearca sa interpreteze $('divContainer').

Din fericire jQuery a implementat o solutie eleganta pentru a evita aceasta problema. A dezvoltat o functie cu ajutorul careia putem defini un nou selector, care sa nu intre in conflict cu cel din Prototype. Codul arata asa:

// Definim noul selector
jQuery.noConflict();

// Folosim noul selector pentru jQuery
function foo() {
	element = jQuery('#divContainer');
}

// jQuery ne mai ofera doua alternative. Acestea sunt dupa cum urmeaza:

// Definirea unui selector mai scurt
var $j = jQuery.noConflict();

function foo() {
	element  = $j('#divContainer'); // Observati folosirea $j in loc de $
}

// Crearea unui wrapper in interiorul caruia putem executa cod jQuery cu selctori clasici
jQuery.noConflict();

jQuery(document).ready(function($){
	// Aici putem folosi selectorul $
	element = $('#divContainer');
});

Foarte important de retinut este aceste metode vor functiona numai daca includem libraria jQuery la final. Daca jQuery este inclus inainte de Prototype, se va putea folosi selectorul de jQuery, dar nu va fuctiona Prototype.

Sa recapitulam. Daca avem de folosit jQuery impreuna cu alta librarie JavaScript, cum ar fi Prototype, trebuie sa efectuam urmatorii pasi:

1. Includem libraria jQuery la final
2. Folosim una din metodele ilustrate mai sus

Tin sa mentionez ca Prototype a fost folosit ca exemplu, pentru ca asta a fost cazul concret de care m-am lovit. Solutia ar trebui sa functioneze cu orice alta librarie care foloseste acest tip de selectori. De asemenea, ca solutie alternativa, se poate folsi medote de override proprietare celorlalte libarii. Eu nu am cautat, pentru ca nu aveam de gand sa umblu la codul Prototype deja scris. Am implemetat solutia jQuery pentru ca asta e solutia cu are lucram in acel moment.