Cambios en la forma en que Drupal 7 maneja JavaScript y jQuery


14

Actualmente estoy desarrollando un script JavaScript que se ejecuta en una página de administración. Leí sobre los cambios realizados en Drupal 7, es decir, el cambio de document.ready()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.


Si consola.log ($ ('# edit-apiusername')); ¿Da salida al objeto, es decir, jQuery encuentra el elemento en la página?
Budda

Incluso con Drupal 6 se suponía que usabas los comportamientos de Drupal, en lugar de document.ready. Lo que informa no es específico de Drupal 7.
kiamlaluno

Respuestas:


28

Creo que entendiste mal los cambios.

El código JavaScript se debe incluir (function ($) { ... })(jQuery);para permitir el uso de un $acceso directo a jQuery. Esto es para permitir que jQuery juegue 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 envolviendo tu código jQuery.ready(function(){ ... }).

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

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

1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.