Mengatasi Konflik Antara jQuery Dan MooTools

24 Jun 2008 49,352 views

jQuery logoMooTools logo

jQuery dan MooTools adalah salah dua Framework JavaScript yang banyak digunakan. Masing-masing memiliki kelebihannya sendiri-sendiri (Untuk detail feature masing-masing framework silakan cek sendiri di website mereka). Lalu bisakah kita menggunakan keduanya secara bersamaan? Tentu saja bisa.

Yang harus diperhatikan adalah bahwa jQuery menggunakan tanda $ sebagai shortcut untuk pemanggilan jQuery, sedangkan MooTools pun menggunakan $() sebagai shortcut untuk mempersingkat document.getElementById().

Jika kita meload jQuery dan MooTools secara bersamaan di satu halaman, maka bisa dipastikan bakalan terjadi konflik di antara keduanya.

Namun untungnya, kunci untuk mengatasi masalah tersebut sudah disediakan oleh jQuery, yaitu dengan menjalankan script jQuery.noConflict() setelah jQuery diload.

1
2
3
4
5
6
<script type="text/javascript" src="mootools.js"></script>
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

Kemudian di dalam script jQuery yang kita buat juga harus menggunakan jQuery sebagai pengganti $

1
2
3
jQuery(document).ready(function() {
    jQuery('#content').html('Hello');
});

Jika pemanggilan menggunakan jQuery terasa terlalu panjang atau kurang keren, kita juga bisa membuat variabel sendiri sebagai penggantinya, misalnya sbb:

1
2
3
4
5
6
var asdfasfasfasfasdaf = jQuery.noConflict();
 
//lalu gunakan nama variabel tersebut sebagai pengganti jQuery
asdfasfasfasfasdaf(document).ready(function() {
    asdfasfasfasfasdaf('#content').html('Hello');
});

Maka masalah konflik horizontal antara jQuery dan MooTools pun bisa diatasi, dan mereka berdua pun bisa berjalan berdampingan dengan bahagia. :x:x

57 Comments

  1. Ogi says:

    kuerennnn

  2. weka says:

    ya ya ya…
    seandainya mootools juga mau mengerti dengan jQuery…
    alangkah indahnya dunia jika kita hidup berdampingan :D

  3. dOne says:

    ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp ssiiieeeppp

  4. gawibowo says:

    selain dengan mootools, cara ini juga bisa digunakan untuk jQuery dengan prototype.js
    karena prototype memiliki shortcut yg sama dengan mootools yaitu $()

  5. fanari says:

    oo gitu ya mas, pantesan slideshow jQuery saya nggak bisa jalan klo dipasang bareng tooltip Mootools
    btw saya penggemar jQuery lo mas ;)
    makasi banyak mas :)

  6. gawibowo says:

    sama-sama mas :)
    saya malah sebaliknya: slideshow nya MooTools nggak mau jalan karena barengan sama jQuery
    tapi sekarang sudah beres ;)

  7. byadha says:

    byadha say thanks for you…

  8. yudz says:

    wah,,.. makyuooosss….

  9. sankuy says:

    Thanks ya

  10. Indonesian says:

    “jQuery dan MooTools adalah salah dua Framework JavaScript yang ada di dunia ini.”

    Ntu “salah dua” tuh..? berarti Framework JavaScript yang benar ada 8 dong di dunia ini. :D

  11. Barock says:

    Thanks Bgt mas,, Akhirnya aku bisa mendamaikan mereka, Check y di website qu, aku pake hotspot effet dari mootools dan content slider dari jQuery di satu halaman, Mubarock.com

  12. bayou says:

    jadi jQuery() tuh lebih panjang ketimbang asdfasfasfasfasdaf() ?? Wah…

    Siip!!!

  13. mbang says:

    akhirnya ketemu juga…mkasih banget lho

  14. Zawa says:

    Mantab juragan… its nice…

  15. slam says:

    Wah membantu aku nih, karena menambah pengetahuanku

  16. Bayu says:

    Terima kasih banyak…, solusi Anda membantu saya yang lagi bingung menghadapi masalah konfilk motools & jquery

    Terima kasih ya :)

    • DR4CUL4 says:

      thanks so much..!!!
      mudah-mudahan amal informasinya mendapat balasan yang setimpal saking gusti Allah.

      majulah bangsa indonesia..

      MERDEKAAA….

  17. aagun2006 says:

    walah baru tahu juga nih, ;))

    makasih mas …

  18. apuy says:

    blm pernah ngalamin sih, tp so thanks buat infonya.

  19. Didid says:

    ada tutorial bhs indonesia ga ya, mohon bantuan..

  20. sanggramawijaya says:

    maturnuwun sanget njih mas..

    :)

  21. eNeS says:

    Makasih infonya mas… Saya dah pake mootools, tp pingin jg pake Jquery. Mudah-mudahan keduanya bisa seiring sejalan dengan penuh kemesraan, hehe…

  22. uqi says:

    APPPAAAA….
    Ternyata eh ternyata bisa seperti itu!!!
    eh maap salam kenal, saya uqi, baru belajar jquery.
    Makasih banget infonya,

  23. dayat says:

    nice.. thanks

  24. gigi says:

    hip hip,,,…. Suwun ngilmu nipun…..

    siiiiiiiiiiiiippppp dah…………. :)

  25. webnya banyak artikel bagus, thanks

  26. Ahmad Ali says:

    mmhhh oohhh gitu yah pantesan dari dulu kagak jalan jalan !! makasih sebelumnya !! hehe

  27. Risky says:

    Mas punyaq koq gag bisa ya…
    slideshow pake jquery trus validasi pake mootools.
    ini slideshownya sudah jalan, tp validasinya yang gag jalan…
    gmn mas? mohon bantuannya… :)

  28. ari says:

    wah mas saya punya masalah nih dengan penggunaan thickbox dan fusionchart jika saya me ref thickbox yang didalamnya terdapat fusionchart maka chartnya tidak akan keluar… tapi jika dibuka biasa tidak mengguanakn thickbox maka chart tersebut keluar wah bagaimana yah mengatasinya….

  29. diazmahendra says:

    wah..thanks bgt artikel nya..sudah di coba berjalan dengan sukses :)

  30. Fathan says:

    Salam Kenal Mas,
    Bermanfaat Banget artikelnya…
    Btw tukeran link ya Mas.
    Thx

  31. ilham says:

    makasih mas, kemaren sempet bingung karena banyak yang bentrok jquerynya.

  32. diazmahendra says:

    klo mau tukeran link boleh aja mas..

    saya pasang duluan yah mas

  33. ada says:

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    • gawibowo says:

      untuk mengatasi komentar panjang tanpa spasi seperti ini (supaya tulisannya tidak keluar dari kotak) bisa menggunakan code css seperti ini:

      word-wrap: break-word;

      (hanya berjalan di browser IE 5.5+, Firefox 3.5+, dan WebKit browsers seperti Chrome dan Safari)

      atau menggunakan:

      overflow: hidden;

      makasih sudah mengingatkan :)

  34. ahmad says:

    wach bagus bngt ne artikel..
    problem saya teratsi…
    makasih2…

  35. fafa says:

    thankss… mantaapppss sekali ni. kolaborasi mootools n jquery memang indah. tapi inilah aku yang baru belajar soal itu, jadi ya thankss.. tuk yang nulis tentang ini. GOOD JOB !!

  36. dhemri says:

    tnya: gmn klo yg konflik itu mlah sesama library JQuery? coz ak make jQuery.validate sama JQuery.quicksearch tpi gak bisa jlan brg dalam satu file. solusiny hrus bda file. mhon mskanny gmn cranya biar ttp bisa jlan dlm satu file . .

    Terimakasih . . .

  37. pelancong says:

    Masih pake xajax nih, mau pindah ke jQuery ga ada waktu.. hiks

  38. 170p3'x says:

    waah mantabs mas, berhasil nih. sempet dibuat pusing juga gara2 konfliknya jQuery ma Mootools..untung nemu artikel ini. thanks berat mas, sungguh sangat berguna bagiku. oiya saya berhasil mengatasi konflik keduanya hanya dengan menyisipkan kode

    jQuery.noConflict();

    Saia tidak menggunakan jQuery sebagai pengganti $.

  39. fananicenter says:

    oh begitu rupanya.. pantesan! aq kira code ane yang salah,, oye.oye sipp2!

  40. achmad says:

    luar biasa, thx infonya salam kenal dari Bandung

  41. kocu says:

    mantap, thanks mas bro …
    alo udah damai jadi aseek deh bikin web yang keren :)

  42. dian says:

    website saya pake joomla, kalo di run di firefox tidak ada masalah tapi ketika di run di IE (hampir semua versi IE)…ada beberapa bagian yang tidak muncul dengan sempurna…dan errornya disebutkan ada masalah di ry.scroll.js dan mootools.js…

    apakah berarti terjadi masalah antara jquery dengan mootools…kemudian penyelesaian gimana??

    kalopun ditambah skrip di atas, kalo naruh skrip diatas dimana ya?? maap masih baru kenal joomla…hehehe

    jawabannya ditunggu segera y mas…terimakasih…

  43. Oemar says:

    kemaren sempat binggung. pas di tambah jquery untuk efek menu gto malah ga jalan multibox yang menggunakan mootools. terpaksa mootoolsnya ane cabut. jadi pake lightbox dengan jquery …

    makasih solusinya mas. tapi skarang malah seru dan pengen belajar lagi tentang jquery nih… :D

    sukese terus mas buat blognya :)

  44. Makasih nih informasinya salam kenal gan….

  45. tomo says:

    saya coba seperti penjelasan di atas tetap tidak bisa sampai hampir putus asa.

    nah, setelah menambahkan kode ini : <code> var $j = jQuery.noConflict(); </code> , langsung di dalam file script (infinitecarousel.js) dan mengubah $(.. menjadi $j(.. , alhamdulillah berhasil,

    makasih tutorialnya

  46. evi says:

    MANTEB ..

  47. kuceng21 says:

    Yay, keren langsung dipraktekin gan, :D, cari2 akhirnya ketemu juga, :D

  48. Terima kasih gan,,ane lagi nyari scriptwid untuk treeview untuk widget blog ane hehehehe

  49. cepicahyana says:

    wawwww…alhamdulillah akhirnya bisa sinkron, makasih gannn,,superr sekali..

  50. gLutera says:

    Terima kasih atas informasinya. Sangat membantu sekali.

  51. temong says:

    gan code yang ini ditaro mana?
    jQuery(document).ready(function() {
    jQuery(\’#content\’).html(\’Hello\’);
    });

  52. temong says:

    jquery ga jalan , tp montools nya jalan. gagal gaaan bantu sayaaa tulung

  53. temong says:

    berhasil gan ane ganti semua $ pake jQuery diatas , script yang baru ane masukin wkwkwkwk matursuwun

  54. […] Mengatasi konflik Antara jQuery dengan framework javascript lainnya […]

Leave a Reply to ArdianYS Free Prestashop Theme Cancel reply

Your email address will not be published. Required fields are marked *