Javascript richtig einbinden

Dieses Tutorial ist spezifisch für Drupal 6. Das Drupal 7 Tutorial: Javascript richtig einbinden findest du hier.

Am einfachsten ist es die Javascript Dateien über das Theme einzubinden. Seit Drupal 6 kann man dies über die theme-name.info Datei (jedes Theme besitzt diese Datei im Theme Ordner).

; $Id:$
name = Theme Name
description = Beschreibung
core = 6.x
engine = phptemplate

scripts[] = js/jquery.cycle.all.min.js
scripts[] = js/jquery.cycle.custom.js

Im Beispiel befinden sich die beiden eingebundenen js Dateien im Theme Ordner in einem Unterverzeichnis namens "js".

Wem das schon zu viel Code ist der soll besser nicht weiterlesen und sich ersteinmal mal das Modul JS Injector anschauen. Für alle andere gehts hier weiter.

Javascript über Drupal.behaviors einbetten

Seit Drupal 6 gibt es die Methode Drupal.behaviors um Javascript in Drupal einzubinden. Dies stellt sicher, dass auch dynamische Elemente des DOM gefunden und modifiziert werden können.

Mit der alten Methode $(document).ready() funktioniert dies leider nicht.

Das die Verknüpfung dynamischer Elemente wichtig ist, weiß man spätestens wenn man das erste Mal stundenlang versucht hat herauszufinden warum ein Javascript plötzlich nicht mehr funktioniert. Drupal.behaviors ist vergleichbar mit der jQuery Funktion "live".

Das heißt jede Javascript Funktion sollte wie folgt geschrieben werden

Drupal.behaviors.einEindeutigerName = function (context) {
  // Javascript hier!
};

Javascript über PHP einbinden

Wenn man Javascript über PHP einbinden möchte (oder muss) sollte man die Drupal-Funktion drupal_add_js verwenden.

Javascript direkt einbinden

drupal_add_js('
  Drupal.behaviors.einEindeutigerName = function (context) {
    // Javascript hier!
  };
', 'inline');

Eine Javascript-Datei einbinden

drupal_add_js('/pfad/zur/javascript-datei.js');

Dieser Code sollte entweder der Datei template.php im aktiven Theme Ordner platziert werden, oder in einem eigenen Modul. Zum Beispiel über hook_init().

function deinModulName_init() {
  // Javascript direkt einbinden
  drupal_add_js('
    Drupal.behaviors.einEindeutigerName = function (context) {
      // Javascript hier!
    };
  ', 'inline');

  // Eine Javascript-Datei einbinden
  drupal_add_js( drupal_get_path('module', 'deinModulName') . '/javascript-datei.js', 'theme');
}

Javascript auf ausgewählten Seiten einbinden

Wenn man Javascript nur auf einigen Seiten einbinden möchte kann man das zum Beispiel über eine if-Abfrage im hook_init machen.

function deinModulName_init() {
  // Nur auf node/123 einbinden
  if (arg(0) == 'node' AND arg(1) == 123) {
    // Javascript direkt einbinden
    drupal_add_js('
      Drupal.behaviors.einEindeutigerName = function (context) {
        // Javascript hier!
      };
    ', 'inline');

    // Eine Javascript-Datei einbinden
    drupal_add_js( drupal_get_path('module', 'deinModulName') . '/javascript-datei.js', 'theme');
  }
}

Kommentare

und das soll man so nun

und das soll man so nun verstehen ??? geht das nicht ausführlicher ?

Ja, das soll man verstehen.

Ja, das soll man verstehen. Aber entschuldigung, natürlich geht das auch ausführlicher:
JavaScript Startup Guide

PS: woher kommt eigentlich diese Erwartungshaltung?

Also ich finde die Anleitung

Also ich finde die Anleitung perfekt, vielen Dank!!

Also ich finde sie auch

Also ich finde sie auch verständlich - setzt eben ein paar Vorkenntnisse voraus. Aber gut auf den pampigen Kommentar reagiert ;-)

Vielen Dank für das Feedback!

Vielen Dank für das Feedback! Ich habe das Tutorial nochmal überarbeitet, hoffentlich besser strukturiert und um einige Informationen ergänzt :) Lob motiviert halt viel mehr als Kritik :)

A working code for inserting

A working code for inserting the jquery modal dialog in a drupal-node can be found here: http://drupal.org/node/1704144#comment-6338114

Kommentar verfassen

Der Inhalt dieses Feldes wird nicht öffentlich gezeigt.