jquery
jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga rentan terhadap bentrok antar script baik script dengan script pada framework yang sama atau dengan script dengan framework berbeda. Sebenarnya website resmi jQuery sudah memberikan solusi yang sangat mudah untuk mengatasi bentrok antar script ini.

Perintah dasar jQuery selalu diawali dengan simbol "$" (tanpa tanda kutip) atau kita mengenal simbol ini dengan nama "Dollar". Ini sebagai identitas perintah-perintah jQuery, jadi jika teman-teman blogger menemukan script yang selalu diawali dengan tanda "$" maka ini adalah script jQuery. Dan sudah menjadi kewajiban bahwa script jQuery ini harus didampingi framework jQuery-nya sebagai sistem dasar.

Framework jQuery haruslah terlebih dahulu dipanggil (load) agar deklarasi-deklarasi script yang kita buat mampu berjalan normal. Ibaratnya jQuery itu adalah rumah dan script-script yang kita buat adalah isi dari rumah itu.

Memasang Framework jQuery


Untuk memasang framework jQuery, simpan kode seperti ini di atas </head> (saat ini versi terbaru adalah v.2.1.1)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>

Harus diingat, pemasangan framework ini cukup satu saja. Apabila lebih dari satu, maka script tidak akan bekerja. Ada pertanyaan, versi mana yang paling baik digunakan? Tentunya versi terbaru memuat berbagai perbaikan. Akan tetapi terkadang tidak menjadi jaminan 100% script akan bekerja dengan framework terbaru. Terkadang ada saja script yang bekerja dengan framework versi sebelumnya.

Mengatasi Konflik Script jQuery


Seperti sudah dijelaskan diatas bahwa script jQuery selalu diawali dengan simbol "$", simbol inilah yang harus diperhatikan karena simbol ini merupakan sebuah deklarasi fungsi-fungsi jQuery. Maka ini pula yang menjadi solusi untuk mengatasi konflik script-script jQuery. Bagaimana mengatasi konfliknya? Contoh dibawah ini merupakan cara yang mudah untuk mengatasi konflik jQuery.

Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

$(document).ready(function(){
$("a.slick").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});

Script diatas sebenarnya sudah berjalan dengan baik akan tetapi kemungkinan bentrok sangat mudah terjadi. Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
$jnoc("a.slick").click(function () {
$jnoc(".active").removeClass("active");
$jnoc(this).addClass("active");
$jnoc(".content-slick").slideUp();
var content_show = $jnoc(this).attr("title");
$jnoc("#"+content_show).slideDown();
});
});

Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.

Penjelasan :
  1. var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript
  2. $jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$" sehingga jika kita perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.
  3. $jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan anda, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.
Semoga bermanfaat...

Disalin dari tutorial Blogger Tune-Up by Hendriono

60 komentar

Pertamak, heheh... :-bd, tips sangat berguna untuk mengindari bentrok script kang :D

Balas

iya sob.. kemaren ada pertanyaan tentang konflik jquery

Balas

mash hrus dibaca ulang kang, biar mudeng .... soalnya dri kmren klo sy mw pasang sswtu dblog yg hrus ada jquery sllu saja gagal, padahl jquery dah sy pasang diblog .... :(

Balas

ada beberapa kemungkinan sih... bisa jadi konflik atau mungkin juga penempatan jquery

Balas

awalnya jquery ada dua, tpi dh q hpus kang, dn penempatan jquery dah sesuai ptunjuk diatas ... ntu kira2 gmn yah kang ?

Balas

kalau tidak jalan, pindahkan script (bukan framework) di atas </head> coba pindah ke atas </body>, kalau masih belum jalan juga, sebisa mungkin scricpt dekat dengan objek yang di eksekusi.

Balas

sy coba dulu kang,...

oy, klo jquery ada troble apa ngaruh juga di postingan? soalnya ada stu postingan stelah kmentar lbh dari 200 kok dah nggak bisa tmpil lgi kometarnya ... jika ntu krn sbb jquery mohon solusinya kang ... :)

Balas

ngga masalah kalau jumlah komentar, kalau untuk komentar lama sebetulnya ada pagination utntuk menampilkan halaman selanjutnya

Balas

Ketigax kang, pantesan aja saya selalu gagal klo memasang javascript, ternyata setelah saya lihat2 ada script yang sama juga.. thanks kang tutorialnya..

Balas

sama2.. emang gitu sih, kalau dalam penulisan script harus hati2... kalau ga hati2 akibatnya akan ga jalan

Balas

Berarti kalo 'jnoc' nya di inisialisasi ksn dengan nama yang lain bisa dong kang....???

Balas

dengan kata apapun bisa.. coba lihat lagi poin 3 di atas

Balas

Waah ... udah di buatin tutorial nya .. Makasih banget kang :)
langsung ke tkp ini .. praktikan tutorial nya moga aja sukses :)
intinya setiap script yg di awali $ harus kita ubah perintah nya sbg contoh sprti $jnoc yah ...
mudah2n berhasil kang |o|

Balas

kang mau tanya . kalau jquery ny hanya 1 aja . berarti yg lain harus di hapus kan ? nah saya udah coba hapus semua dan coba pakai yg terbaru. tapi kalau yg ada di gambar ini perlu di hapus atau di ganti gak kang ? ini yg dari template droidplus punya ki itu .. :) lihat gambar kang.
[img]http://1.bp.blogspot.com/-5_a7zgiydgA/U_lzckufD5I/AAAAAAAACXw/kGed_Hp067A/s1600/capture-20140825-111607.png[/img]

Balas

ga usah... itu hanya terbatas pada threade comment hack aja

Balas

ouh .. yg itu di biarin aja y kang .. ? Sip dah ..
btw semua perintah JS yg awalan $ perlu di ganti ya kang.

Balas

ouh iya kang 1 lagi . tanya kalau misal keadaan ny seperti ini :
<script type='text/javascript'>
//<![CDATA[
$(document)


penulisan var $jnoc = jQuery.noConflict(); di letakan dalam CDATA atau di luar ny ?

Balas

wow, kangismet emang jagonya edit2an, komen g+ aja di edit,, mantap :-bd oh ya kang, cara menu yg di samping itu biar g kepotong saat versi mobile gimana? punya saya versi mobilenya kacaw
http://clickandskip.blogspot.com

Balas

ada pertanyaan lagi kang. misal kasus nya gini :
dalam blog punya banyak JS.
apakah Jquery Conflict ini bisa di tulis di tiap JS dengan nama perintah $ yang berbeda ?
apakah kita cukup menulis Jquery Conflict ny var $jnoc = jQuery.noConflict(); cukup 1 saja atau kita pasang di tiap JS yg berbeda?

Balas

wah bagus ilmunya :D
kalo bisa share dong mas cara membuat komentar G+ seperti blog kangismet :-bd

Balas

kayaknya ini bukan komentar G+ cuma di edit menyerupai koment g+ mungkin :P??

Balas

Kualitas ltd pinjaman adalah salah satu perusahaan pinjaman independen terkemuka di seluruh dunia. Kami mapan dan selama bertahun-tahun telah mengembangkan pemahaman yang baik tentang kebutuhan dan persyaratan individu. Kami berkomitmen untuk memperlakukan pelanggan secara adil dan menawarkan layanan yang profesional, ramah dan membantu. Prosedur kami dirancang untuk kenyamanan Anda, untuk memastikan bahwa kami menawarkan produk yang sesuai dengan kondisi Anda, formalitas dikurangi seminimal mungkin, dan bersama-sama dengan pendekatan kami fleksibel untuk masing-masing program, pastikan Anda menyelesaikan permintaan pinjaman Anda. Kami telah membantu pelanggan mengubah dan memperbaiki kehidupan mereka selama lebih dari 25 tahun dan kami benar-benar independen, kita berada dalam posisi yang unik untuk menawarkan berbagai pinjaman untuk semua jenis bisnis dan individu. Tujuan kami adalah untuk memenuhi kebutuhan keuangan Anda dan kepuasan Anda sangat penting bagi kami. Itulah sebabnya kita harus memberikan pinjaman dengan tingkat bunga 2%, silakan kembali ke kami hari ini jika Anda tertarik dengan layanan kami.
E-mail: qualityloanltd@qualityservice.com.

Balas

berpengaruh apa ndak kang, terhadap loading blog.?????

Balas

penulisan di dalam CDATA, trus cukup di script yang konflik aja ga usah semua script

Balas

hahahha.. ketepu, ini komentar blogger ko.. bukan gplus. menu di samping itu harus di edit media queries nya

Balas

hehehe bingung ya.. ini komentra blogger ko, bukan G+

Balas

penulisan jQuery yang kurang tepat, sedikit banyak mengganggu loading blog

Balas

ok kang udah di laksanain . tapi tetep aja gak bisa kang :(
masih tetep bermasalah ini js nya
[img]http://3.bp.blogspot.com/-wfcivQkCelM/U_mpCRsjWqI/AAAAAAAACYA/_ZrV_VmBN9Y/s1600/capture-20140825-154847.png[/img]
sama hal nya dengan back to top ny kang :(
JS nya berfungsi hanya pada Home page / Halaman depan saja kang. kalau kita masuk ke suatu artikel atau halaman lain js nya gak fungsi. :(
situs saya ini kang :http://xkomo.com sapa tahu Ki mau bantu :)

Balas

kalau untuk Older Post, saya klik bisa ko... coba kirim xml nya ke saya, copy paste aja, file .txt ga masalah.

Balas

hampir ketepu ni, ane kira komen gplus :D
btw mantap tipnya kang.. mulai update yg lainnya lg kang

Balas

si akang penipuan wae yeuh threaded'y .. kang minta bantuan dung hehe bisa bikin checkout paypal ato mengedit yg saya biar terintegrasi kanggo didieu kang ( punten yeuh nympen link ) http://roeltemplate.blogspot.com/2014/04/loreme-ispume-brakadabra.html

Balas

kan saya tukang tipu.. hahahha... insya Allah bentar lg update

Balas

heuheu... aduh saya belum pernah nyoba kang.. urang sam2 mencoba we nya :D
ke hasilna urang diskusikeun

Balas

older post udah bisa kang tapi tampilan nama nya yg belum kang :( harusnya dia bukan older post tapi judul artikel yg sebelum nya :(
xml smw kode pada template ny yah kang ? ok saya kirim ke email kang ismet yah .
makasih seblum ny kang udah mau bantu :) template yg saya pakai template Droidplus punya ki :D Hehe..

Balas

Cik lah nyobian Kang! tikapungkur saya belajar jquery belet wae heee...

Balas

Kabita kolom komentar na uy.... bagi atuh Kang =D

Balas

kang Ismet emang jagonya, nipu jago juga nih,, lebih tepatnya kode yang mana yang harus di edit? saya kalau belum dikasih tahu kodenya, gtau kang, kalo misalnya harus di edit script, ya yang mana, gitu loh kang. Maklum blogger kmaren sore :p

Balas

mangga diraosan.. parantos rengse mang :D

Balas

heuheu... ke urang bagi2 lah :)

Balas

ngedit kode CSS aja ko.. cari aja kode CSS untuk threaded comments nya

Balas

super sekali tutorialnya kang :)

Balas

g ada kang, yaudah saya tanya ke pembuat templatenya saja

Balas

masa ga ada? pasti ada dong CSS komentar..

Balas

ko jadi komentar sih? kan tanya menunya yg samping biar g nabrak posting waktu versi mobile

Balas

wkwkwkw... kirain yang pertanyaan "tepatnya kode mana...." itu nanya komentar :P
untuk mengatasi sidebar yang nabrak, harus memahami struktur template terlebih dahulu, baru dibuat css media queries nya, tentukan pada perangkat unkuran berapa nabraknya. misal pada ukuran 800px maka buat CSSnya :

@media screen and (max-width:800px) {
tentukan selektor disini
}

Balas

ok, praktek dulu, eh itu header dri tadi gonta ganti warna terus punya kngismet :P

Balas

oh ya, max widht itu biar semua ukuran misal dari yang terbesar ke terkecil bisa, diisinya max widht itu ukuran paling kecil atau yang paling besar yang nabrak?

Balas

header ganti pake tag kondisional :P
max-width, dari yang terbesarnya... nanti lebih kecil dari itu ngikutin

Balas

kang masta,, ane mo nanya kLo script jqueryx ada banyak semua doLarnya di pasangin juga yaa kang anti konfliknya,, soaLnya script doLar ada deLapan pohon yg tertatanam di tempLate ane,, mohon pencerahab masta... :)

Balas

tah kedahna mah, sistem politik di indonesia teh ngangge jQuery nya kang, meh tiasa di atasi konflik2 partai nu teu paruguh. -__-

Balas

Abdi mah kalakah rieut kang,
Soalna template abdi teh mani loba pisan kode - kodena.

Balas


thx gan sangat bermanfaat artikelnya ya gan.
salam kenal ya gan
silakan bergabung bersama kami di website www.168sdbet.com


Untuk keterangan lebih lanjut silahkan hubungi customer service online kami di :
* YM1 : sundulbet_cs1@yahoo.com
* YM2 : sundulbet_cs2@yahoo.com
* Pin Bb : 2A026596

Balas

Hal Seperni Ini Pernah Terjadi Pada Script CSS blog ane Mas, Ane sempat kebingungan Luar biasa Karena ada yang tidak berfungsi dari sebagian widget dalam bliog ane. trima kasih for sharing

Balas

kang, saya masalah dengan jquery, saya membuat tabview menggunakan Jquery, ketika saya test di pagespeed insight (WMT) terdapat notification remove blocking rendering file Js. kemudian solusinya di beri asyncron, tetapi saat diberi asycnron, Tabview tersebut tidak berkerja, alhasil jadi seperti widget biasa. solusinya bagaimana ya kang? apakah bentrok seperti yang kang ismet maksud pada artikel ini?? mohon pencerahan kang. Thanks

Balas

Kang mengapa ya kok, kalau masang tombol notifikasi komentar, bisa jalan tapi ga muncul isinya/ siapa yang mengomentari.... bantu kang,,,, (y)

Balas

salam kenal ya gan semuanya

AfbSports Memiliki HOT PROMO! Sebagai Berikut:

* PROMO SPORTBOOK
- Bonus New Member20%
- Bonus New Member 100%
- Bonus 3% Sportbook ( SBOBET , IBCBET , AFB88, I1BET88 )
- Bonus CASHBACK 5% - 10%

* PROMO LIVE CASINO
- Bonus New Member 5%, Next Deposit 3%
- Bonus Full Rollingan 0.7%
- Bonus CASHBACK 0.5%

AFBSPORT Menyediakan Permainan Sebagai Berikut:
* Sportbook
* Live Casino
* Togel
* Tangkas
* Poker

Support Bank Lokal:
* BCA
* BNI
* BRI
* DANAMON
* MANDIRI

NB: Jangan Ragukan Lagi Diri Anda Untuk Bermain Di AFBSPORTS, Karena AFBSPORTS Adalah Agent Taruhan Online Terpercaya Dan Jaringannya Sudah Tersebar Sampai Asia Tenggara.

AFBSPORTS Akan Melayani Anda Dengan 24/7 Nonstop!
* YM1: afbsportsindo@yahoo.com
* YM2: afbsports.indo1@yahoo.com
* YM3: idr.afb88@yahoo.com
* Skype : afb.sports2
* Call Center: +855 78783843
* Pin BB : 2257E32B
Terima Kasih.

Salam Admin, AFBSPORTS

Balas

Harus pelan2 bacanya ini mah

Balas

santai aja sob.. ga usah keburu2

Balas

Poskan Komentar


×
Chat