Menyelesaikan Kesalahan jQuery Tidak Didefinisikan

Kesalahan “jQuery Tidak Didefinisikan” adalah rintangan umum yang dihadapi dalam pengembangan web, terutama bagi mereka yang baru mengintegrasikan jQuery, pustaka JavaScript yang banyak digunakan, ke dalam halaman web. Pesan kesalahan ini muncul di konsol browser ketika kode JavaScript mencoba menggunakan sintaks atau fungsi jQuery sebelum perpustakaan dimuat, atau jika belum dimuat sama sekali. Pada dasarnya, ini adalah cara browser mengatakan, "Saya tidak tahu apa itu jQuery," yang menyebabkan penghentian langsung eksekusi skrip terkait jQuery.

Variasi kesalahan

Kesalahan “jQuery Tidak Didefinisikan” dapat muncul dalam berbagai cara, bergantung pada browser, lingkungan (seperti lingkungan pengembangan versus server produksi), atau bagaimana skrip disertakan dalam halaman web. Beberapa variasi umum dari pesan kesalahan ini meliputi:

• jQuery tidak didefinisikan
• $ tidak ditentukan
• Kesalahan Referensi yang Tidak Tertangkap: $ tidak ditentukan
• Kesalahan Referensi yang Tidak Tertangkap: jQuery tidak ditentukan
• Kesalahan Referensi: jQuery tidak ditentukan
• Kesalahan Referensi: $ tidak ditentukan
• Kesalahan Ketik: $(…). bukan suatu fungsi
• Kesalahan Ketik: jQuery(…). bukan suatu fungsi

Memahami “jQuery Tidak Didefinisikan” di WordPress

Di ekosistem WordPress, jQuery digunakan secara luas oleh tema dan plugin untuk menambah interaktivitas dan meningkatkan pengalaman pengguna. Mungkin plugin yang Anda gunakan dirancang untuk memanfaatkan jQuery untuk fungsinya—slider, pop-up, validasi formulir, dan banyak lagi. Ketika browser melaporkan bahwa “jQuery tidak ditentukan”, itu berarti JavaScript situs Anda mencoba memanggil fungsi jQuery sebelum jQuery itu sendiri dimuat, atau belum dimuat sama sekali.

Penyebab umum kesalahan ini di WordPress

Beberapa skenario khusus untuk WordPress dapat menyebabkan kesalahan ini, termasuk:

Tema dan plugin : Tema atau plugin yang tidak mengantrekan jQuery dengan benar, atau mengandalkan versi yang sudah ketinggalan zaman, dapat menyebabkan masalah ini.

Pengeditan manual : Pengeditan khusus pada file tema, terutama jika jQuery dibatalkan pendaftarannya secara manual atau dimasukkan dalam antrean yang salah, dapat mengakibatkan kesalahan ini.

Konflik : Terkadang, menginstal beberapa plugin yang semuanya berupaya memuat versi jQuery mereka sendiri dapat menyebabkan konflik dan selanjutnya, kesalahan.

Penyebab umum kesalahan ini

Urutan skrip salah : Penyebab paling umum adalah halaman HTML Anda mencoba menggunakan jQuery sebelum dimuat.Skrip yang mengandalkan jQuery harus ditempatkan setelah tag<script> perpustakaan jQuery .

Gagal menyertakan jQuery : Lupa menyertakan jQuery di halaman web Anda dapat menyebabkan kesalahan ini.Pastikan Anda memiliki tag<script> yang menjadi sumber perpustakaan jQuery dengan benar.

Pustaka yang bertentangan : Terkadang, pustaka atau skrip JavaScript lain dapat mengalami konflik dengan jQuery, terutama jika pustaka atau skrip tersebut juga menggunakan simbol $. Hal ini secara tidak sengaja dapat menyebabkan jQuery ditimpa atau tidak diinisialisasi dengan benar.

Masalah cache : Dalam beberapa kasus, browser Anda mungkin menyimpan cache versi lama halaman web Anda yang tidak menyertakan jQuery, atau jalur ke jQuery mungkin salah, sehingga menyebabkan kegagalan dalam memuat perpustakaan.

Masalah jaringan pengiriman konten (CDN) : Jika Anda memuat jQuery dari CDN, dan CDN tidak aktif atau tidak dapat dijangkau, situs Anda tidak akan dapat memuat pustaka, sehingga mengakibatkan kesalahan ini.

Cara memperbaiki kesalahan jQuery tidak ditentukan

Sebelum melakukan perubahan apa pun, penting untuk memastikan Anda memiliki cadangan situs web lengkap. Jika Anda memiliki akses ke lingkungan pementasan atau pengembangan, Anda dapat menggunakan lingkungan tersebut untuk memperbaiki kesalahan dan mengabaikan potensi gangguan apa pun dari pengeditan langsung di situs langsung.

Dengan adanya perlindungan tersebut, Anda siap untuk mengatasi kesalahan “jQuery tidak ditentukan”.

Verifikasikan jQuery dimuat dengan menguji sumber skrip

Salah satu penyebab umum di balik masalah ini adalah meskipun jQuery mungkin disertakan, jQuery tidak dimuat dengan benar karena berbagai alasan seperti URL yang salah, masalah jaringan, atau izin akses file. Untuk memverifikasi apakah jQuery dimuat dengan benar, pendekatan sederhana namun efektif melibatkan pengujian sumber skrip langsung di browser Anda.

Langkah-langkah untuk menguji sumber skrip jQuery

1. Pertama, Anda perlu menemukan tag skrip yang menyertakan jQuery dalam kode HTML Anda. Tag ini sangat penting karena menentukan sumber dari mana jQuery seharusnya dimuat. Cari baris dalam kode Anda yang terlihat seperti ini:

 <skrip src="http://code.jquery.com/jquery-1.11.2.min.js"></skrip>

2. Atribut src ini berisi URL perpustakaan jQuery yang Anda coba muat.
3. Ekstrak URL dari atribut src dari tag skrip.Ini adalah tautan langsung ke file jQuery yang Anda sertakan di situs Anda. Pastikan Anda menyalin seluruh URL secara akurat, termasuk bagianhttp:// atau https://di awal.
4. Buka tab atau jendela baru di browser web Anda dan tempelkan URL yang disalin ke bilah alamat. Tekan Enter untuk menavigasi ke URL ini.

Jika file jQuery dimuat dengan benar, Anda akan melihat seluruh konten perpustakaan jQuery ditampilkan sebagai teks biasa di browser Anda. Hal ini menunjukkan bahwa sumber skrip jQuery dapat diakses dan berfungsi seperti yang diharapkan.

Metode alternatif untuk memverifikasi pemuatan jQuery

Cara memverifikasi pemuatan jQuery melalui sumber halaman

1. Navigasikan ke halaman web yang ingin Anda periksa menggunakan browser web pilihan Anda.
2. Klik kanan di mana saja pada halaman web dan pilihLihat Sumber Halaman dari menu konteks.Opsi ini mungkin sedikit berbeda antar browser.
3. Dengan kode sumber terbuka, Anda sekarang perlu menemukan penyertaan skrip jQuery. Ini dapat dengan mudah dilakukan dengan menggunakan fungsi pencarian yang ada di browser Anda:
4. TekanCtrl+F di Windows atau Command+Fdi Mac untuk membuka bilah pencarian.
5. Ketikjquery pada kolom pencarian dan tekan Enter.Tindakan ini akan menyorot semua kemunculan jquery di kode sumber.
6. Cari baris di hasil yang disorot yang menyerupai tag skrip yang tertaut ke perpustakaan jQuery.

Mungkin terlihat seperti ini:

 <skrip src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

atau untuk jQuery yang dihosting secara lokal, kira-kira seperti ini:

 <skrip src="/path/to/jquery.min.js"></skrip>

Jika Anda menemukan baris seperti itu, jQuery disertakan di halaman Anda. Jika tidak, jQuery mungkin tidak dapat dimuat, sehingga dapat menyebabkan masalah yang Anda alami.

Menggunakan alat pengembang untuk memverifikasi pemuatan jQuery

1. Akses situs web Anda dan buka alat pengembang di browser Anda. Hal ini biasanya dapat dilakukan dengan mengklik kanan halaman dan memilihInspect atau dengan menekan F12atauCtrl+Shift+I(Windows) /Cmd+Option+I(Mac).
2. Di dalam alat pengembang, temukan dan klik tabJaringan .Tab ini menampilkan semua permintaan jaringan yang dibuat oleh situs web Anda saat dimuat.
3. Centang opsiNonaktifkan cache dan dengan tab Jaringan terbuka, muat ulang situs web Anda untuk menangkap semua aktivitas pemuatan.
4. Gunakan opsi filter untuk mempersempit hasil ke file JavaScript. Anda biasanya dapat melakukan ini dengan memilih filter JS atau mengetikkan jqueryke dalam filter/kotak pencarian.
5. Gulir daftar skrip yang sedang dimuat atau gunakan fungsi pencarian di dalam tab Jaringan untuk menemukan entri yang terkait dengan jQuery. Anda sedang mencari file yang berisijquery dalam namanya, yang menunjukkan perpustakaan jQuery sedang dimuat.

Pastikan jQuery disertakan dengan benar di WordPress

Jika Anda menemukan bahwa jQuery tidak dimuat atau Anda mengalami masalah meskipun ada, Anda mungkin perlu memastikan bahwa jQuery disertakan dengan benar dalam tema atau plugin WordPress Anda. WordPress menawarkan cara yang tangguh untuk mengelola skrip melalui fungsi wp_enqueue_script .Metode ini lebih disukai karena menangani ketergantungan skrip secara efisien dan membantu menghindari konflik.

Enqueue jQuery di WordPress

1. Hubungkan ke situs WordPress Anda menggunakan klien FTP atau pengelola file yang disediakan oleh layanan hosting Anda.
2. Arahkan kefolder tema Anda dan temukan file function.php. Disarankan untuk membuat tema anak dan membuat perubahan di sana untuk menghindari kehilangan penyesuaian saat tema Anda diperbarui.
3. Jika jQuery tidak ada, Anda dapat mengantrekannya dengan menambahkan cuplikan kode berikut ke filefunction.php Anda :

 fungsi my_theme_enqueue_scripts() {

 wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

Ini memastikan bahwa WordPress menyertakan jQuery di semua halaman situs Anda.

Jika Anda menambahkan skrip khusus yang bergantung pada jQuery, pastikan untuk mencantumkan jQuery sebagai dependensi, seperti:

 wp_enqueue_script( 'skrip khusus', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true );

Terapkan fallback lokal dengan jQuery yang dihosting Google

Menyertakan versi jQuery yang dihosting Google di situs web Anda adalah praktik umum untuk memanfaatkan CDN Google untuk pengiriman pustaka JavaScript populer ini dengan cepat dan andal. Namun, untuk memastikan situs web Anda tetap kuat terhadap potensi gangguan CDN atau masalah jaringan, penerapan fallback lokal sangatlah penting. Penyiapan ini memungkinkan situs Anda secara otomatis menggunakan versi jQuery yang dihosting secara lokal jika, karena alasan apa pun, versi yang dihosting Google gagal dimuat. Metode ini mematuhi praktik terbaik pengembangan web dengan mengoptimalkan kinerja sekaligus memastikan redundansi. Di bawah ini adalah panduan langkah demi langkah untuk menerapkan strategi ini secara efektif.

Sertakan jQuery yang dihosting Google

Pertama, Anda perlu menambahkan tag skrip jQuery yang dihosting Google ke situs web Anda. Tempatkan tag ini di bagian <head> dokumen HTML Anda atau tepat sebelum tag penutup </body>untuk memastikan skrip lain yang bergantung pada jQuery dapat menggunakannya. Misalnya:

 <skrip src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Tambahkan skrip fallback lokal

Segera setelah tag skrip untuk jQuery yang dihosting Google, Anda akan menambahkan sedikit JavaScript. Skrip ini memeriksa apakah jQuery telah berhasil dimuat dari Google CDN. Jika tidak, ia secara dinamis menulis tag skrip baru ke dalam dokumen HTML Anda untuk memuat jQuery dari sumber lokal.

 <skrip>

 jendela.jQuery || document.write('<script src="/path/to/local/jquery-3.5.1.min.js"><\/script>');

</skrip>

Pastikan untuk mengganti“/path/to/local/jquery-3.5.1.min.js” dengan jalur yang benar ke file jQuery yang dihosting di server Anda.

Memahami kodenya

window.jQuery : Bagian skrip ini memeriksa apakah objek jQuery tersedia secara global, yang menunjukkan bahwa jQuery telah berhasil dimuat.

document.write : Cara ini digunakan untuk memasukkan HTML ke dalam dokumen.Ini digunakan di sini untuk menambahkan tag skrip untuk file jQuery lokal jika versi CDN tidak dimuat. Urutan escape<\/script> digunakan untuk mencegah string diinterpretasikan sebagai akhir dari blok skrip.

Memahami mekanisme fallback

Mekanisme fallback beroperasi dengan pemeriksaan sederhana: window.jQuery .Jika objek jQuery tidak ditentukan, ini berarti versi CDN tidak dimuat dengan benar. Metodedocument.write kemudian digunakan untuk memasukkan tag <script>baru yang memuat jQuery dari file lokal.

Manfaat

• Memastikan jQuery selalu tersedia, meskipun CDN gagal.
• Memuat jQuery secara lokal dapat mengurangi latensi dalam skenario tertentu, terutama jika versi CDN lambat merespons atau jika jaringan pengguna mengalami masalah saat menyambung ke CDN.
• Memiliki salinan lokal memberi Anda kendali atas versi jQuery yang digunakan, memungkinkan pengujian dan debugging yang konsisten.

Tambahkan cuplikan ke file wp-config.php

Ketika Anda telah mencoba berbagai metode untuk mengatasi kesalahan “jQuery tidak ditentukan” atau masalah JavaScript serupa di WordPress namun tidak berhasil, menonaktifkan penggabungan skrip dapat menjadi langkah pemecahan masalah yang berguna. Penggabungan skrip adalah fitur WordPress yang menggabungkan beberapa file JavaScript menjadi satu permintaan untuk meningkatkan waktu muat. Namun, hal ini terkadang dapat menyebabkan kesalahan atau menyebabkan masalah pemuatan skrip, terutama jika terjadi konflik atau skrip tertentu tidak dimuat dengan benar.

Mengedit file wp-config.php

Gunakan klien FTP atau pengelola file yang disediakan oleh panel kontrol hosting web Anda untuk mengakses file situs WordPress Anda.

Buka file wp-config.php di editor teks.Jika Anda menggunakan klien FTP, Anda harus mengunduh file terlebih dahulu, membukanya dengan editor teks di komputer Anda, lalu mengunggahnya kembali setelah diedit. Jika Anda menggunakan pengelola file di panel kontrol hosting web, biasanya Anda dapat mengedit file langsung di browser Anda.

Gulir ke bagian bawah file, tepat sebelum baris yang bertuliskan/* Itu saja, berhenti mengedit!Selamat ngeblog.*/ .Di sini, tempelkan cuplikan kode berikut:

 /** Jalur absolut ke direktori WordPress. */

 jika ( !didefinisikan('ABSPATH') )

 mendefinisikan('ABSPATH', dirname(__FILE__) . '/');

 mendefinisikan('CONCATENATE_SCRIPTS', salah);

Setelah menambahkan cuplikan, simpan perubahan Anda. Jika Anda mengedit file secara lokal di komputer Anda, pastikan untuk mengunggahnya kembali ke server, menggantikanwp-config.php yang ada .

Memahami cuplikan

Definisi ABSPATH : Baris ini memastikan jalur absolut ke direktori WordPress didefinisikan dengan benar, yang merupakan persyaratan mendasar agar WordPress dapat beroperasi dengan benar.

Menonaktifkan penggabungan : Baris `define('CONCATENATE_SCRIPTS', false);` secara eksplisit memberitahu WordPress untuk tidak menautkan skrip.Hal ini dapat membantu dalam men-debug masalah skrip dengan memuat setiap skrip satu per satu, sehingga lebih mudah untuk mengidentifikasi skrip mana yang mungkin menyebabkan masalah.

Tambahkan perpustakaan jQuery secara manual

Memasukkan perpustakaan jQuery secara manual langsung ke fileheader.php tema WordPress Anda adalah pendekatan yang mudah, terutama ketika metode lain untuk menyelesaikan masalah terkait jQuery belum berhasil.Metode ini memastikan bahwa jQuery dimuat di awal proses rendering halaman, sehingga mengurangi risiko kesalahan “jQuery tidak ditentukan”.

Cara memasukkan perpustakaan jQuery secara manual

1. Buka halaman Perpustakaan yang Dihosting Google untuk mengakses jQuery versi terbaru.
2. Temukan versi terbaru jQuery yang terdaftar di halaman dan salin tag skrip yang disediakan. T
3. Gunakan klien FTP atau pengelola file yang disediakan oleh layanan hosting Anda untuk mengakses file situs WordPress Anda.
4. Di dalam direktori WordPress Anda, bukawp-content/themes/your-theme-folder/ dan temukan file header.php. Gantifolder tema Anda dengan nama tema Anda yang sebenarnya.
5. Buka file header.php di editor teks.Jika Anda menggunakan pengelola file melalui panel kontrol hosting web, Anda mungkin dapat mengedit file langsung di browser Anda.



6. Tempelkan tag skrip jQuery yang Anda salin dari Perpustakaan yang Dihosting Google tepat setelah tag<head> pembuka di file header.phpAnda . Menempatkannya di dekat bagian atas kepala memastikan bahwa jQuery dimuat lebih awal dan tersedia untuk skrip apa pun yang bergantung padanya.

Misalnya,

 <kepala>

 <skrip src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!-- Isi kepala Anda yang lain di bawah -->

7. Setelah menambahkan tag script, simpan fileheader.php .Jika Anda mengedit file secara lokal di komputer Anda, jangan lupa untuk mengunggahnya kembali ke server, menggantikan file versi lama.

Pertimbangan penting

Tema anak : Jika Anda membuat perubahan pada suatu tema secara langsung, praktik terbaiknya adalah menggunakan tema anak.Hal ini mencegah perubahan Anda ditimpa ketika tema induk diperbarui.

Uji situs Anda : Setelah menambahkan jQuery secara manual, uji situs Anda secara menyeluruh untuk memastikan skrip berjalan sesuai harapan dan tidak ada masalah kompatibilitas.

Menutup pikiran

Di blog kami, kami menjelajahi berbagai solusi untuk mengatasi kesalahan “jQuery tidak ditentukan”, menekankan pentingnya memastikan jQuery dimuat dan diimplementasikan dengan benar di situs web. Kami membahas verifikasi keberadaan jQuery melalui pemeriksaan sumber halaman dan tab Jaringan browser, dan kami membahas peningkatan keandalan situs dengan jQuery yang dihosting Google yang dilengkapi dengan fallback lokal. Selain itu, kami menjelajahi teknik pemecahan masalah WordPress tingkat lanjut, seperti menonaktifkan penggabungan skrip di file wp-config.php dan menambahkan jQuery secara manual ke file header.phpsebuah tema. Secara keseluruhan, penekanan diberikan pada praktik pengeditan yang hati-hati, termasuk menggunakan lingkungan pementasan dan tema anak untuk modifikasi yang aman, untuk menjaga fungsionalitas situs web dan pengalaman pengguna.