Drupal 7: come aggiungere javascript

Come aggiungere un file .js o qualche riga di codice javascript al tuo sito sviluppato con Drupal 7: a una singola pagina, su tutto il sito, al tema, a un modulo, o usando le API di Drupal 7.
Semplice guida in italiano.

Come aggiungere un file javascript in tutto il sito: tema o modulo

Per includere un file .js in tutto il sito si deve modificare il file .info del tema o del modulo che ne farà uso.

Aggiungere un file .js al tema

Individuare e aprire il file NomeTema.info nella cartella che contiene i files del tema.
Per ogni file da allegare, inserire una riga tipo:

scripts[]= js/MioFile.js

Il path indicato è relativo alla cartella del tema.

Aggiungere un file .js al modulo (Drupal 7)

Individuare e aprire il file NomeModulo.info nella cartella che contiene i files del modulo.
Per ogni file da allegare, inserire una riga come sopra: scripts[] = js/MioFile.js

Questo sistema funziona solo con files presenti sul server. Per includere files esterni bisogna usare drupal_add_js().

 


 

Come aggiungere javascript con php e le api di Drupal

Per aggiungere un file .js o una porzione di codice javascript in una pagina php o all'interno di un modulo (vedi anche come creare un modulo) si può usare la funzione:

drupal_add_js($data = NULL, $options = NULL)
$datapuò essere il path di un file .js oppure del codice javascript
$optionspuò essere una stringa che indica il tipo di inclusione (‘file’, ‘inline’, ‘external’, ‘setting’) oppure un array associativo contenente ulteriori istruzioni su come includere il nostro javascript.

Vediamo i modi più semplici per usare l’API di Drupal: drupal_add_js().

Includere un file .js

Per includere un file javascript basta inserire il path del file, relativo a base_path(), come unico argomento, oppure specificando ‘file’ come secondo argomento.

Esempio:

drupal_add_js('misc/MioFile.js');// oppure
drupal_add_js('misc/MioFile.js','file');

In qualsiasi riga di codice php venga chiamata questa funzione, Drupal includerà automaticamente il nostro javascript nella pagina HTML, a meno che non venga indicato diversamente tramite l’opzione ‘scope’.

Includere una porzione di codice “inline”

Per aggiungere codice javascript basta passare una stringa contenente il codice js e l’opzione ‘inline’.

Esempio:

$str ='jQuery(document).ready(function () { alert("Hello!"); });';
drupal_add_js($str,'inline');// oppure, per specificare altre opzioni:
drupal_add_js($str,
 array('type'=>'inline','scope'=>'footer','weight'=>5));auto

Includere un file javascript da un altro server

Se il file da includere non risiede sullo stesso server del sito si può usare l’opzione ‘external’ e indicare l’url del file.

Esempio:

drupal_add_js('http://example.com/example.js','external');

Ci sono diverse opzioni e modi di usare la funzione drupal_add_js(), vedi la documentazione completa sul sito ufficiale (in inglese).

 


 

Come allegare un file javascript a un form

Per includere un file .js a un form, ad esempio per aggiungere dei controlli javascript in fase di inserimento dati, si deve modificare l’oggetto $form (vedi come modificare un form).

In particolare l’attributo #attached permette di caricare files e librerie passando un array contenente le informazioni sui files da inserire.

Esempi:

$filepath = drupal_get_path('module','MioModulo').'/esempio.js';
$form['#attached']['js']= array($filepath);

Includere un file esterno:

$form['#attached']['js']= array('http://code.jquery.com/jquery-1.4.2.min.js'=> array('type'=>'external'));

Includere una porzione di codice:

$str ='jQuery(document).ready(function () { alert("Hello!"); });';
$form['#attached']['js'][]= array('data'=> $str,'type'=>'inline',)

Si può fare la stessa cosa con un file CSS.

$filepath = drupal_get_path('module','MioModulo').'/css/esempio.css';
$form['#attached']['css']= array($filepath);