Penggunaan plugin/library jQuery pada pembuatan aplikasi web tidak dapat dipisahkan lagi. Umumnya, hampir semua web modern sudah menggunakan plugin jQuery untuk membangun webnya. Dan tentunya developer web pun banyak yang menggunakan plugin jQuery termasuk Anda bukan !
Perlu diketahui, jQuery menggunakan tanda $ (dolar) sebagai shortcut variabel untuk perintah jQuery. Jadi, jika Anda menggunakan library Javascript lainnya yang menggunakan variabel $, bisa dipastikan akan terjadi konflik antara library tersebut dengan jQuery. Dan tentunya, masalah yang akan timbul ialah aplikasi web Anda tidak akan berjalan dengan maksimal dikarenakan terjadi konflik antar library Javascript.
Solusi
Untuk mengatasi permasalahan diatas, berikut tips dan trik yang dapat Anda gunakan guna menghindari konflik antar plugin jQuery.
Solusi 1 – Mengatasi Konflik Antar Library Javascript
Cara 1
Solusi ini dapat Anda gunakan jika aplikasi web yang Anda bangun terdiri dari beberapa library Javascript (jQuery, Prototype, MooTools, ataupun YUI). Misalkan, Anda membangun aplikasi web menggunakan 2 library Javascript yaitu jQuery dan Prototype. Maka Anda cukup menambahkan perintah noConflict seperti berikut :
<script src="prototype.js"></script> <!-- Memasukkan library Prototype -->
<script src="jquery.js"></script> <!-- Memasukkan library jQuery -->
<script>
var $j = jQuery.noConflict(); // Membuat variabel baru untuk perintah jQuery yaitu $j
// Nantinya setiap menuliskan perintah jQuery, variabel jQuery yang Anda gunakan ialah $j bukan $
$j(document).ready(function() { // Perintah jQuery
$j( "div" ).hide();
});
// Sekarang variabel $ digunakan untuk mendeskripsikan setiap perintah library Prototype BUKAN jQuery
// Perintah dibawah merupakan perintah Prototype
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
Cara 2
Cara lainnya yang bisa Anda gunakan ialah dengan membuat area lokal khusus untuk perintah jQuery. Misal :
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict(); //
jQuery( document ).ready(function( $ ) {
// Silahkan tuliskan semua perintah jQuery disini. Variabel yang Anda gunakan tetap tanda $ tanpa ada perubahan
$( "div" ).hide();
});
// Untuk area global/luar, variabel $ akan digunakan sebagai perintah Prototype
window.onload = function(){
var mainDiv = $( "main" );
}
</script>
Cara ini cocok digunakan jika Anda tidak ingin ada perubahan pada setiap variabel jQuery.
Solusi 2 – Mengatasi Konflik Antar Versi Plugin jQuery
Ketika membangun aplikasi web, dengan berbagai sebab akhirnya developer memutuskan untuk menuliskan perintah jQuery dengan beberapa versi jQuery. Maksudnya ialah, aplikasi web yang dibangun memiliki perintah jQuery yang ditulis dalam beberapa versi misal ada perintah yang ditulis dan dapat berjalan pada versi 1.5. Ada pula beberapa perintah yang ditulis dan dijalankan pada versi terbaru jQuery.
Nah, jika aplikasi web ini dijalankan tentu akan terjadi konflik pada plugin jQuery-nya. Dikarenakan terdapat dua atau lebih versi jQuery yang dijalankan secara bersamaan. Untuk mengatasi hal tersebut berikut perintah yang dapat Anda guanakan.
<script src="jquery-1.5.1.js"></script> // jQuery versi 1.5.1
<script src="jquery-1.10.2.js"></script> // jQuery versi 1.10.2
<script type="text/javascript">
var jQuery_1_5_1 = $.noConflict(true); // Membuat variabel baru untuk perintah jQuery versi 1.5.1 yaitu jQuery_1_5_1
jQuery_1_5_1(document).ready(function(){ // Nantinya setiap perintah jQuery versi 1.5.1 selalu gunakan variabel jQuery_1_5_1
// Perintah jQuery yang dijalankan pada versi 1.5.1
});
// Variabel $ akan digunakan untuk menuliskan perintah jQuery versi 1.10.2
$(document).ready(function() { // Perintah jQuery yang dijalankan pada versi 1.10.2
$( "div" ).hide();
});
</script>
Kesimpulan
Salah satu faktor yang menyebabkan library Javascript tidak berjalan ialah dikarenakan terjadi konflik antar library. Untuk mengatasi konflik tersebut silahkan pilih dan gunakan salah satu dari cara diatas. Semoga bermanfaat.
