CARA MENGATASI SCRIPT JAVASCRIPT YANG KONFLIK Ketika kita memasukkan dua buah javascript yang berbeda pada suatu website katakan saja javascript yang versi 1.4.2 dan versi 1.7.1. Sebagai contoh permasalah yang kita ambil adalah javascript Banner Rotator (versi 1.7.1) dan javascript Berita (1.4.2). Setelah dijalankan Banner Rotator-nya maka java script yang ada pada Berita tidak akan jalan, berikut penampakannya.

Pada gambar di atas terlihat bahwa Modul Berita Terbaru tidak berjalan dengan semestinya. Kenapa ini terjadi? Ini terjadi karena terjadi konflik antara javascript Banner Rotator dan javascript Modul Berita terbaru. Pertanyaannya sekarang adalah bagaimana mengatasi permasalah tersebut? OK pada kesempatan ini saya akan memberikan penjelasan untuk mengatasi permasalah ini. Berikut Penjelasannya. Suatu javascript biasanya biasanya menggunakan karakter $ (string) sebagai fungsi ataupun variabel, karakter string ini yang merupakan penyebab biasanya terjadi konflik antara javascript satu dengan javascript lainnya atau jQuery lainnya karena jQuery menggunakan karakter $ sebagai aliasnya atau pemisalan variabelnya. Untuk mengatasi javascript yang konflik adalah dengan menggunakan listing : jQuery.noConflict apa gunanya listing ini? Guna dari listing ini adalah untuk melepaskan kontrol jQuery terhadap variabel $. Contoh : Misalnya permasalahan yang kita hadapi adalah konflik antara Banner Rotator dan Modul Berita terbaru. Banner rotator ini dikendalikan oleh file javascript preview.js yang ada pada folder functions/slidebanner/js. Hal ini dapat kita lihat pada penambahan listing pada file index.tpl.htm pada folder template kita.

Berikut sedikit penggalan listing preview.js : $(document).ready( function() { var $panel = $(".panel"); var $container = $panel.find(".container"); var $infoSec = $panel.find(".info-section"); Sedangkan Modul Berita Terbaru dikendalikan oleh file tag_berita.php dan di dalamnya terdapat script berikut : // when the DOM is ready, convert the feed anchors into feed content jQuery(document).ready(function() { jQuery("#newsslider1").accessNews( { title:"", subtitle:"", }); }); Pada penggalan script preview.js dan tag_berita di atas terlihat terjadi konflik yaitu pada bagian : $(document).ready( function() { dan jQuery(document).ready(function() { hal ini dianggap sama dalam hal pendefinisian sehingga mau tidak mau salah satu javascript ini harus mengalah.... hee..hee.... agar tidak terjadi konflik yang berkepanjangan... Maka untuk mengatasi permasalah ini kita kita modifikasi dengan menggunakan jQuery.noConflict dan mendefinisikan variabel jQuery(document) yang ada pada file Modul Berita Terbaru (tag_berita.php)

Maaf yah kalau kepanjangan penjelasannya he...hee.... OK lah kita langsung saja pembahasan utama kita. Pertama-tama kita buka file tag_berita.php kemudian kita modifikasi listingnya pada baris 14-26. // when the DOM is ready, convert the feed anchors into feed content jQuery(document).ready(function() { jQuery("#newsslider1").accessNews( { title:"", subtitle:"", }); }); '; Modifikasi yang dilakukan adalah melakukan penambahan karakter jQuery.noConflict dan pendefinisian variabel jQuery(document).ready(function() {. Berikut hasil modifikasinya : // when the DOM is ready, convert the feed anchors into feed content var ansari=jQuery.noConflict(); ansari(document).ready(function() { ansari("#newsslider1").accessNews( { title:"", subtitle:"", }); }); '; Setelah itu save file tag_berita.php var ansari=jQuery.noConflict(), kode ini digunakan untuk merubah alias untuk jQuery dari karakter jQuery menjadi ansari.

Dan Hasilnya :

NB : saya juga lampirkan file tag_berita.php yang sudah dimodifikasi Salam, Ansari Saleh Ahmar, S.Si., M.Sc. http://ansarisaleh.web.id