Conflict jQuery MooTools

Saptamana aceasta la un proiect m-am confruntat cu o problema destul de interesanta care la prima vedere pare destul de simpla, dar in realitate este un pic mai delicata, si anume conflictul care apare intre cele doua mari biblioteci JavaScript, jQuery si MooTools. Astfel, la proiectul respectiv, am fost nevoit sa folosesc ambele biblioteci pe aceeasi pagina si am avut surpriza sa constat ca bucata de cod MooTools nu functioneaza.

Asa ca am facut ca orice alt programator in situatia mea confruntat cu o problema noua si am apelat la atotcunoscatorul Google. Astfel am aflat de existenta functiei jQuery noConflict();

Citind pe diverse bloguri, eram asigurat ca aceasta functie imi va rezolva toate problemele, asa ca m-am apucat fericit de treaba. Nu a fost totusi o surpriza foarte mare cand am realizat ca folosind aceasta functie, a inceput sa functioneze codul jQuery, dar MooTools nu mai functiona.

Dupa cateva ore de munca de cercetare, am aflat ca in esenta exista cam 3 trucuri cu ajutorul carora se pot intercala pe aceeasi pagina ambele librarii folosind functia noConflict();, si anume:

  1. inlocuirea simbolului '$' cu stringul 'jQuery' oriunde acesta apare in cadrul codului jQuery folosit. De mentionat ca acest lucru include si documentele .js de natura jQuery care sunt incarcate in header daca e cazul; astfel incat acestea trebuie pastrate pe server pentru a putea fi modificate, deci nu pot fi incarcate din alta parte. Dupa ce ati executat aceasta operatie, adaugati in header dupa incarcarea tuturor fisierelor .js urmatoarea portiune de cod, pentru a include functia noConflict():
    		
  2. O alta metoda este de a scrie tot codul jQuery in cadrul unei functii document.ready inainte de a trece la o noua biblioteca. Exemplul de mai jos evidentiaza un astfel de cod:
    		jQuery(document).ready(function(){
    $("div").hide();
    });
     
    
    Aceasta metoda are dezavantajul ca e greu utilizabila pentru portiuni foarte mari de cod.
  3. Ultima solutie implica asocierea functiei noConflict(); cu o variabila, ca in exemplul de mai jos:
    		var $s = jQuery.noConflict();
    
    // Foloseste jQuery cu ajutorul $s(...)
    $s(document).ready(function(){
    $s("div").hide();
    });
     
    

Trebuie mentionat faptul ca aceste solutii ar trebui sa functioneze si daca se foloseste jQuery impreuna cu alte biblioteci gen Prototype, desi personal nu am testat acest lucru.

Alex B.

1Comentarii la "Conflict jQuery MooTools"

  1. ffa spune:

    mersi..m-a ajutat foarte mult acest tutorial..foarte tare!

Adauga Comentariu

Mesaj

Trimite