Cómo hacer que jquery funcione en Drupal 7 - para principiantes


8

He estado leyendo muchos tutoriales en línea sobre cómo hacer que jquery funcione en drupal 7. Aunque hay muchas líneas de código y ejemplos, lo que no puedo encontrar es qué parte del código poner (dónde es obvio para la mayoría de los desarrolladores)

Entonces, lo que hago es

1) creo un nuevo bloque personalizado

2) Allá desde la interfaz de usuario de Drupal, escribo mi código

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3) Muestro el bloque, pero el jquery no está cargado.

¡Estoy leyendo que debería poner este código en archivos de plantilla, archivos de tema, archivos CSS, archivos de información y no sé qué!

No me queda claro en qué archivo exactamente y en qué ruta tengo que poner el código anterior para que funcione correctamente.

¿Algún consejo?

¡Muchas gracias!

Respuestas:


11

Un par de cosas aqui:

  1. Si puede evitar ingresar JavaScript y PHP en el sitio a través de la interfaz de usuario, posiblemente le ahorrará problemas más adelante. Si no tiene alternativas, está bien, pero aquí hay algunas razones por las que no es una gran idea: https://drupal.stackexchange.com/a/2512/10729 (tenga en cuenta que está dirigido a PHP, no a js, sino a la mayoría de los puntos todavía representan js). El módulo de ejemplos tiene un ejemplo de creación de bloques personalizados.
  2. Para adjuntar js, si lo desea en todas las páginas, puede agregarlo al archivo de información de su tema. Sin embargo, si solo lo desea en algunos lugares, lo mejor es usar drupal_add_js () para que solo esté en las páginas que debe estar. Para adjuntar el comportamiento js a los formularios, también puede usar el atributo #attached en sus elementos de formulario.
  3. Si usa $ (document) .ready (), disparará su javascript cuando se cargue la página, sin embargo, si la página se actualiza a través de ajax, su javascript no se disparará nuevamente, por lo que el nuevo marcado no se verá afectado por lo que sea su javascript es. Para manejar estos casos, debe usar comportamientos de drupal en lugar de documentos listos.

Por ejemplo:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Do your thing here.
    }
  };
})(jQuery);

Recomiendo leer estas páginas:
Administrar JavaScript en Drupal 7
Trabajar con JavaScript y jQuery


7

En su .js inserte como este código;

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

     // All our js code here
     alert('Hello jQuery');
     // end our js code

   }

 };})(jQuery);

En su plantilla template.php cree hook_preprocess_html y luego use drupal_add_js

function themename_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/your.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

Solo cambia el nombre del tema


1
Tenga en cuenta que esto agregará el javascript a cada página, lo que puede o no ser deseable.
rooby

1
Jeje sí, esto agregará el JavaScript a cada página. Solo deje que @apdr lo intente y pruebe con su conocimiento
sibiru

2
si desea que se cargue el js en cada página a través del tema, ¿no tendría más sentido enumerar el archivo en el archivo .info del tema?
Jimajamma

3

su archivo .js debería verse así:

(function ($) {
    Drupal.behaviors.cdgi = {
        attach: function(context) {

        //your code

        }
    }
}(jQuery));

use drupal_add_js () en su módulo para agregar este archivo en Drupal. buenas referencias aquí y aquí .

borrar el caché a menudo;)

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.