Come far funzionare jquery su Drupal 7 - per i principianti


8

Ho letto molti tutorial online su come far funzionare jquery su Drupal 7. Sebbene ci siano molte righe di codice ed esempi, ciò che non riesco a trovare è quale pezzo di codice mettere dove (forse è ovvio per la maggior parte degli sviluppatori)

Quindi, quello che faccio è

1) creo un nuovo blocco personalizzato

2) Laggiù dall'interfaccia utente di Drupal, scrivo il mio codice

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3) Visualizzo il blocco, ma il jquery non è caricato.

Sto leggendo che dovrei inserire questo codice in file modello, file tema, file css, file info e non so altro!

Non mi è chiaro in quale file esattamente e in quale percorso devo mettere il codice sopra per funzionare correttamente?

Qualche consiglio?

Grazie molto!

Risposte:


11

Un paio di cose qui:

  1. Se riesci a evitare di inserire javascript e PHP nel sito tramite l'interfaccia utente, ciò ti farà risparmiare problemi. Se non hai alternative è ok ma qui ci sono alcuni motivi per cui non è una grande idea: https://drupal.stackexchange.com/a/2512/10729 (nota che è rivolto a PHP, non a js ma alla maggior parte di i punti rappresentano ancora js). Il modulo esempi ha un esempio di creazione di blocchi personalizzati.
  2. Per allegare js, se lo desideri su tutte le pagine puoi aggiungerlo al file di informazioni del tuo tema. Se lo desideri solo in alcuni punti, è meglio usare drupal_add_js (), quindi è solo nelle pagine che deve essere. Per associare il comportamento js ai moduli, puoi anche usare l' attributo #attached sugli elementi del modulo.
  3. Se usi $ (document) .ready (), genererà il tuo javascript quando la pagina viene caricata, tuttavia se la pagina viene aggiornata tramite ajax, il tuo javascript non si attiverà di nuovo, quindi il nuovo markup non sarà influenzato da qualunque tuo javascript è. Per gestire questi casi è necessario utilizzare comportamenti drupal anziché documenti pronti.

Per esempio:

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

Consiglio di leggere queste pagine:
Gestire JavaScript in Drupal 7
Lavorare con JavaScript e jQuery


7

Nel tuo .js inserisci come questo codice;

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

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

   }

 };})(jQuery);

Nel tuo template template.php crea hook_preprocess_html quindi usa drupal_add_js

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

Basta cambiare il loro nome


1
Nota che questo aggiungerà il javascript ad ogni pagina, che potrebbe essere o meno desiderabile.
rooby

1
Ehi sì, questo aggiungerà il javascript ad ogni pagina. Basta lasciare che @apdr lo provi e lo faccia testare con le sue conoscenze
sibiru

2
se vuoi avere js caricato su ogni pagina tramite il tema, non avrebbe più senso elencare il file nel file .info del tema?
Jimajamma,

3

il tuo file .js dovrebbe apparire così:

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

        //your code

        }
    }
}(jQuery));

usa drupal_add_js () nel tuo modulo per aggiungere questo file in Drupal. buoni riferimenti qui e qui .

svuota spesso la cache;)

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.