Mengatasi Konflik Antara jQuery Dan MooTools

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.