Perubahan dalam cara Drupal 7 menangani JavaScript dan jQuery

14

Saat ini saya sedang mengembangkan skrip JavaScript yang berjalan pada halaman administrasi. Saya membaca tentang perubahan yang dibuat di Drupal 7, yaitu pindah dari document.ready()ke fungsi jQuery sendiri. Namun, skrip berikut tidak berfungsi.

(function ($) {
  console.log('hello');
  $('#edit-apiusername').append('test');
})(jQuery);

console.log()menyala dan saya bisa melihat hasilnya, tetapi append sederhana tidak berfungsi. ID bidang sudah benar.
Saya tidak yakin apa yang saya lewatkan di sini, tetapi saya menduga itu ada hubungannya dengan cara saya merujuk objek. Melihat kode JavaScript Views 3, saya bisa melihatnya dilakukan dengan cara yang sama.

7 javascript

— digital
sumber

Jika Anda console.log ($ ('# edit-apiusername')); apakah itu menampilkan objek, yaitu elemen yang ditemukan pada halaman oleh jQuery?

— budda

Bahkan dengan Drupal 6 Anda seharusnya menggunakan perilaku Drupal, bukan document.ready. Apa yang Anda laporkan tidak spesifik untuk Drupal 7.

— kiamlaluno

28

Saya pikir Anda salah memahami perubahan.

Kode JavaScript harus dibungkus (function ($) { ... })(jQuery);untuk memungkinkan penggunaan $sebagai pintasan jQuery. Ini untuk memungkinkan jQuery bermain dengan baik dengan perpustakaan lain . Dalam fungsi ini, Anda masih harus menunggu DOM dimuat jika Anda ingin mengubahnya. Itulah yang membungkus kode jQuery.ready(function(){ ... })Anda.

Tetapi alih-alih menggunakan jQuery.ready(function(){ ... }), Anda harus menggunakan perilaku untuk membuat JavaScript Drupal tahu bahwa kode Anda ingin memproses apa pun yang ditambahkan ( atau dihapus ) dari DOM.

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $(context).find('#edit-apiusername').append('test');
    }
  }
})(jQuery);

— Pierre Buyle
sumber

1

Anda juga dapat mempertimbangkan aliasing seluruh objek jQuery ke variabel lain pilihan Anda, seperti pada:

$j = jQuery.noConflict();

Anda akan menempatkan ini di luar pernyataan siap untuk membuatnya dapat diakses di luar enkapsulasi.

— Artur
sumber