Alterações na maneira como o Drupal 7 lida com JavaScript e jQuery

14

Atualmente, estou desenvolvendo um script JavaScript que é executado em uma página de administração. Eu li as mudanças feitas no Drupal 7, a saber, a mudança document.ready()para a sua própria função jQuery. No entanto, o script a seguir não funciona.

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

console.log()está disparando e posso ver a saída, mas o simples acréscimo não funciona. O ID do campo está correto.
Não tenho certeza do que estou perdendo aqui, mas suspeito que tenha a ver com a maneira como estou referenciando o objeto. Olhando para o código JavaScript do Views 3, posso ver que é feito de maneira semelhante.

7 javascript

— digital
fonte

Se você console.log ($ ('# edit-apiusername')); ele gera o objeto, ou seja, o elemento está sendo encontrado na página pelo jQuery?

— budda

Mesmo com o Drupal 6, você deveria usar os comportamentos do Drupal, em vez de document.ready. O que você está denunciando não é específico para Drupal 7.

— kiamlaluno

28

Eu acho que você não entendeu as mudanças.

O código JavaScript deve ser inserido (function ($) { ... })(jQuery);para permitir o uso de $como atalho para jQuery. Isso permite que o jQuery seja executado com outras bibliotecas . Nesta função, você ainda precisa aguardar o carregamento do DOM para alterá-lo. É isso que envolve o seu código jQuery.ready(function(){ ... }).

Mas, em vez de usar jQuery.ready(function(){ ... }), você deve usar comportamentos para permitir que o JavaScript do Drupal saiba que seu código deseja processar qualquer coisa adicionada ( ou removida ) do DOM.

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

— Pierre Buyle
fonte

1

Você também pode considerar aliasing todo o objeto jQuery para outra variável de sua escolha, como em:

$j = jQuery.noConflict();

Você colocaria isso fora da instrução ready para deixá-lo acessível fora do encapsulamento.

— Artur
fonte