it-swarm-es.com

Cambios en la forma Drupal 7 maneja JavaScript y jQuery

Actualmente estoy desarrollando un script JavaScript que se ejecuta en una página de administración. Leí sobre los cambios realizados en Drupal 7, a saber, el movimiento de document.ready() a su propia función jQuery. Sin embargo, el siguiente script no funciona.

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

console.log() está disparando y puedo ver la salida, pero el simple anexo no funciona. La ID del campo es correcta.
No estoy seguro de lo que me falta aquí, pero sospecho que tiene que ver con la forma en que estoy haciendo referencia al objeto. Mirando el código JavaScript de Views 3, puedo ver que está hecho de manera similar.

14
digital

Creo que entendiste mal los cambios.

El código JavaScript debe estar envuelto en (function ($) { ... })(jQuery); Para permitir el uso de $ Como acceso directo a jQuery. Esto es para permitir jQuery para jugar bien con otras bibliotecas . En esta función, aún debe esperar a que se cargue el DOM si desea modificarlo. Eso es lo que hace envolver tu código en jQuery.ready(function(){ ... }).

Pero en lugar de usar jQuery.ready(function(){ ... }), debería sar comportamientos para que el JavaScript de Drupal sepa que su código quiere procesar cualquier cosa agregada ( o eliminada ) del DOM .

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

También puede considerar aliasar todo el objeto jQuery a otra variable de su elección, como en:

$j = jQuery.noConflict();

Debería colocar esto fuera de la instrucción ready para dejarlo accesible fuera de la encapsulación.

1
Artur