Einbindung von Javascript jQuery in Contao 4 - Anleitung

[Schnippel]

Hi Leute,

ich versuch mal hier ein kleine Anleitung für Anfänger zu eröffnen, wie sich
eigener Javascript / jQuery Code in Contao 4 einbinden lässt.

Ausgangssituation:

Ich habe im Seitenlayout unter dem Punkt "Eigener Javascript-Code"
folgenden Code eingebunden:

<script>
$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
});
</script>

siehe Foto:
Unbenannt-1.jpg

Das Ganze funktioniert auch.

Nun stellt sich die Frage, belässt man das so,oder gibt es
einen effektiveren Weg den Code einzubinden?
Z.B. mit einer eigenen Datei j_script.html im templates Ordner?

Was wären die Vor- und Nachteile und wie genau muß man dabei vorgehen?

[Spooky]

Ich verwende immer den Weg über das Template, da das editieren über den eigenen Editor bei weitem bequemer ist.

[Samuell]

Ich binde generell in "eigener headercode" und in "eigenes js" ein Template ein, da ich dann bequem den editor nutzen kann.

Gesendet von meinem SM-N910F mit Tapatalk

[mlweb]

dito.

[Andreas]

Ich benutze auch j_-Templates, z.B. j_misc.html5.

Schau dir die j_-Templates vom Core an. Du solltest deine Scripts genauso escapen wie das dort gemacht ist. Über dieses Template hast du die Möglichkeit das Script in den HEAD oder ans Ende vom Body zu bekommen.

$GLOBALS['TL_HEAD'][] = '<script>...</script>';
$GLOBALS['TL_BODY'][] = '<script>...</script>'; 

(Wobei TL_BODY ungefähr das gleiche ist, als würdest du das Script direkt dort hin schreiben.)

Über das Template kannst du auch direkt eine eigene Datei files/js/misc.js laden, entweder im Head oder am Ende vom Body oder mit dem Flag "|static" kannst du sie auch mit in die kombinierte Datei packen.

$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/misc.js|static'; 

[mlweb]

ich versuch mal hier ein kleine Anleitung für Anfänger zu eröffnen, wie sich
eigener Javascript / jQuery Code in Contao 4 einbinden lässt.

Habe ich gestern nicht dran gedacht. Bei Rocksolid gibt es eine Superanleitung zu diesem Thema. https://rocksolidthemes.com/de/conta...eit-optimieren (Schritt 4). Ist zwar damals für Contao 3 entstanden, gilt aber für Contao 4 m.E. genauso.

[Schnippel]

Euch erstmal vielen Dank für die hilfreichen Infos.

Frage zu den Templates:

Es gibt j_xxx.html5 und js_xxx.html5..

Wann nehme ich welches Template als Vorlage?

Hier nochmal der Code:

<script>
$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
});
</script>

[Spooky]

Es gibt j_xxx.html5 und js_xxx.html5..

Wann nehme ich welches Template als Vorlage?

js_ Templates sind für JavaScript ohne Abhängigkeit zu MooTools oder jQuery.
j_ Templates sind für JavaScripts, die jQuery benötigen.
moo_ Templates sind für JavaScripts, die MooTools benötigen.

[Andreas]

...
Hier nochmal der Code:
...

Escape deinen Code, so wie Conato das in den j_- und moo_-Templates auch macht.

[Schnippel]

Folgender Lösungs-Ansatz funktioniert:

Schritt 1:
Ein Template j_xxx.html5 angelegt.
Darin den alten Code gelöscht und folgenden Code eingetragen:

<script>
$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
});
</script>

Schritt 2:
Im BA > Seitenlayout ist unter dem Punkt "jQuery-Templates" dieses eben angelegte Template zu sehen.
Da Häckchen rein zum Aktiviert.

Das Ganze funktioniert auch.

Ist das so okay?
Oder macht man das anders?


### Folgender Lösungsweg funktoniert bei mir nicht ###

Bei meinen Recherchen hier im Forum finde ich immer wieder,
daß eine js-Script-Datei angelegt werden muss, auf die dann in dem Template zu verweisen ist.
Dieser Weg funktionierte aber bei mir nicht:

Hier die Script-Datei "mein_script.js" , die im Ordner files/js abgelegt ist:

$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
});

Im j_xxx - Template habe ich dann folgendes eingetragen:

 <?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/mein_script.js';
?>

Der Ordner ist öffentlich freigegeben und im BA > Seiteneinstellung das angelegte jQuery-Template aktiviert.
Aber es funktioniert so nicht.
Woran kann das liegen?

[Spooky]

Das wird im <head> eingebunden. Zu diesem Zeitpunkt existieren noch keine DOM Elemente und kannst daher auch nichts damit anfangen. Du brauchst zumindest ein $(document).ready. Außerdem solltest du deinen eigenen JavaScript Code korrekt wrappen.

[Andreas]

Warum präsentierst du deinen Code hier nicht sauber eingerückt?

$('nav.mod_navigation ul li.submenu > a').click(function() {
  $(this).parent().siblings().find('ul').slideUp(300);
  $(this).next('ul').stop(true, false, true).slideToggle(300);
  return false;
});

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/mein_script.js';
?>

1. Wie ich oben bereits sagte, escapen, wie Contao das auch macht.

Für jQuery

(function($) {

  // your code

})(jQuery); 

2. Soll das Script irgendetwas mit Elementen auf der Seite unternehmen, dann darf das Script erst starten, wenn der DOM existiert. Also so:

(function($) {
  $(document).ready(function() {

    // your code

  });
})(jQuery); 

3. Ist das Script abhängig von einem anderen Script, welches vorher geladen werden muss, dann muss das andere Script vorher geladen werden . Z.B. ist dein Code, wenn du die jQuery-Schreibweise benutzt davon abhängig, dass jQuery geladen ist. Oder wenn du Colorbox-Funktionen benutzt, dann muss die JS-Klasse Colorbox vorher geladen werden.

Du siehst also, dass man nur etwas analytisch an die Sache herangehen muss um dann zu sehen "Ah ja, kann ja nicht gehen, weil ...".

Edit: Ah, Spooky hat mitlerweile ähnliches erzählt. Hatte ich noch nicht gesehen.

[Schnippel]

Vielen Dank für Eure Hilfe,
jetzt funktioniert es :-)


Wenn ich mir den Quellcode anschaue,
dann liegt das Script im Head-Bereich.
Durch die Anweisung

 $(document).ready(function() { ..

bekommt es sozusagen gesagt, daß es erst ausgeführt werden soll, wenn die Seite (oder Dokument) geladen ist.

Ist es jetzt egal, ob das Script im Head-Bereich steht, oder gibt es Vorteile, wenn man es im Body einbaut (vielleicht bessere Ladezeiten ? ) ?

[Spooky]

Ja, wenn du es am Ende des <body> hast, blockiert das Script nicht das Rendering der Seite.

[Andreas]

...
daß es erst ausgeführt werden soll, wenn die Seite (oder Dokument) geladen ist.
...

Man spricht da immer vom DOM, nicht von der Seite oder Dokument, weil es auch noch ein anders Event gibt, welches erst feuert, nachdem auch alle Ressourcen, wie Scripte, CSS, Bilder usw. geladen sind. Das wäre das load Event. Das DOMContentLoaded Event (in jQuery ready, in MooTools domready) feuert schon, sobald das DOM bekannt ist.

• https://developer.mozilla.org/de/doc...MContentLoaded
• https://developer.mozilla.org/en-US/...eb/Events/load

@Spooky: Ich habe meine Scripte auch meistens am Ende der Seite, aber den Vorteil, den du beschreibst, verstehe ich nicht so ganz.

1. Im HEAD

<head>
  <script src="path/to/jquery.js"></script>
  <script>
    (function($) {
      $(document).ready(function() {
        $('div').css('backround', 'tomato');
      });
    })(jQuery);
  </script>
</head>
<body>
  <div>Content</div>
</body>

2. Im BODY unten

<head>
  <script src="path/to/jquery.js"></script>
</head>
<body>
  <div>Content</div>
  <script>
    (function($) {
      $(document).ready(function() {
        $('div').css('backround', 'tomato');
      });
    })(jQuery);
  </script>
</body>

Ist es in diesem Beispiel nicht sogar besser, wenn es oben wäre? Bei 2 rendert der Browser das DIV und setzt dann das CSS auf. Bei 1 setzt der Browser das CSS auf sobald das DOM vorhanden ist, und dann rendert der Browser das DIV.

[Spooky]

In deinem Beispiel bleibt jQuery im <head>, dadurch hast du also keinerlei Vorteil. Wäre jQuery auch am Ende des <body>, kann die Seite schneller angezeigt werden. Wenn dein JavaScript aber für die Darstellung von above-the-fold Inhalten gebraucht wird, dann sollte es natürlich in den <head>. Wobei das dann auch wieder in deinem Beispiel keine Rolle spielt, da du sowieso auf document.ready wartest

[Andreas]

Dann wäre die Colorbox z.B., so wie Contao die aufsetzt (am Ende) dort richtig, weil das ja nur ein Feature ist, welches erst beim Klick auf Bilder zum Einsatz kommt. Das Accordion könnte aber oben besser aufgehoben sein, damit die Accordions möglichst schnell zugeklappt sind? Habe ich das jetzt so in etwa richtig verstanden?

Also spätestens wenn etwas unschön ist, Springen, Flackern usw. Haben wir jetzt mit dem kompletten Hintergrundwissen die Möglichkeit auf die Suche nach einer besseren Einbindungsweise zu gehen

Bremst denn das

<script src="path/to/jquery.js"></script>

im HEAD tatsächlich das Rendering? Wartet der Browser wirklich zuerst, bis dieses Script eingelesen ist? Ich meine immer beobachtet zu haben, dass ich trotzdem die Seite sehe (z.B. wenn per CDN geladen und der Anbieter klemmt). Was, wenn diese Ressource nicht erreichbar ist, dann sehe ich doch auch trotzdem die Seite (sprich es wird gerendert).

[Spooky]

Bremst denn das

<script src="path/to/jquery.js"></script>

im HEAD tatsächlich das Rendering? Wartet der Browser wirklich zuerst, bis dieses Script eingelesen ist? Ich meine immer beobachtet zu haben, dass ich trotzdem die Seite sehe (z.B. wenn per CDN geladen und der Anbieter klemmt). Was, wenn diese Ressource nicht erreichbar ist, dann sehe ich doch auch trotzdem die Seite (sprich es wird gerendert).

Ja, probiere es selbst aus. Erzeuge dir eine wait.php mit

<?php sleep(20);

und füge

<script src="wait.php"></script>

im <head> ein. Öffne dann die Seite in einem neuen Tab. Es wird mindestens 20 Sekunden dauern, bis dass dir der Browser überhaupt etwas von der Seite anzeigt.

Das gleiche passiert, wenn du

<script src="…"></script>

irgendwo mitten im Content hast. Erreicht der Browser beim rendern diesen <script> Tag, rendert der Browser nicht mehr weiter und es sieht kurz so aus, als würde die Seite dort aufhören. Sobald das Script geladen ist, rendert der Browser weiter.

[Spooky]

Siehe dazu auch die aktuelle Diskussion in diesem Ticket: https://github.com/contao/core-bundle/issues/1123

[Andreas]

Kann ich nicht bestätigen. Ok, das mit dem sleep() ist klar, weil der Server mit der Auslieferung wartet. Aber mit "foo.js", "wait.php" oder "..." ist die Seite sofort da. FF und Chrome. (Die Dateien existieren nicht).

Habe es in Eigene Head-Tags eingefügt.

[Spooky]

Ok, das mit dem sleep() ist klar, weil der Server mit der Auslieferung wartet.

Darum geht es ja. Der Browser rendert erst weiter, wenn das JavaScript geladen ist. Mit sleep(20) simulierst du, dass das Laden der externen JavaScript Datei besonders lange dauert - nur um die Thematik zu verdeutlichen.

[mandrake]

Fritz hat schon Recht und versucht lediglich den Sachverhalt plausibel zu verdeutlichen. Dieses Verhalten ist und war schon immer in allen Browsern gleich und beschäftigt uns daher leider immer wieder.

In Bezug auf Contao verschärft sich diese Problematik - meiner persönlichen Ansicht nach - durch das saudumme Verhalten von Contao, dass es Entwicklern ermöglicht mit Modulen/ Bundles JS auszuliefern, welches quasi an beliebiger Stelle im Quellcode platziert werden kann.

[Andreas]

Ich habe jetzt mal einen Test mit einer 50 MB großen JS-Datei gemacht. Die Seite wird trotzdem sofort angezeigt. FF und Chrome. Datei dürfte nicht aus dem Cache kommen, da ich sie umbenannt habe. Ich nehme mal für kurze Zeit den Passwortschutz raus, damit ihr testen könnt.

https://c3demo.andreasburg.de/de/testseite.html
Die Datei heißt files/bar.js

[Spooky]

FireFox blocked auf jeden Fall, bis dass die Datei runtergeladen ist. Chrome genau so.

[Andreas]

Mit sleep(20) simulierst du, dass das Laden der externen JavaScript Datei besonders lange dauert - nur um die Thematik zu verdeutlichen.

Ich denke, dass dies etwas anders ist. Mit sleep() gibt der Browser erst gar nicht die Anfrage zurück, erst wenn das PHP abgearbeitet ist.

Wie groß eine Datei ist, welche mit

<script src="files/bar.js"></script>

im <head> steht, interessiert die Auslieferung der HTML-Seite erstmal nicht. Der Browser liest ja dann aus dem HTML, dass er diese Ressource laden soll und kümmert sich darum.

[Spooky]

Ich denke, dass dies etwas anders ist. Mit sleep() gibt der Browser erst gar nicht die Anfrage zurück, erst wenn das PHP abgearbeitet ist.

Nein, das siehst du falsch. Die sleep() Anweisung steht ja nicht im Request der Seite - sondern im Request für die (vermeintliche) JavaScript Datei. Die sleep() Anwiesung in wait.php hat ja überhaupt keine Auswirkung auf das, was in Contao passiert und somit keine Auswirkung auf den Main Request, der dir die Seite zurück gibt.

Wie groß eine Datei ist, welche mit

<script src="files/bar.js"></script>

im <head> steht, interessiert die Auslieferung der HTML-Seite erstmal nicht. Der Browser liest ja dann aus dem HTML, dass er diese Ressource laden soll und kümmert sich darum.

Ja - aber der Browser rendert nicht, solange files/bar.js nicht runtergeladen ist.


Übrigens, deine files/bar.js mag zwar 50 MB groß sein, tatsächlich übertragen werden aber nur 168 KiB, da dein Webserver die gzip Komprimierung aktiv hat . Darum glaubst du uns auch nicht - weil 168 KiB sind natürlich schnell geladen.

Du solltest es nicht mit dieser Datei testen, sondern so wie von mir beschrieben. Oder teste es mit einer JS Datei, die mehrere 100 Megabyte groß ist und schalte die automatische Komprimierung des Webservers ab.

[Andreas]

Ah, ja klar, die wait.php hat ja nichts mit dem HTML zu tun, sondern ist eine weitere Anfrage, ok.

Und verdammt, ich hatte mich schon gewundert, warum Chrome und Opera 169kB anzeigen, der FF aber 50MB. Ah, jetzt sehe ich, der FF zeigt auch Übertragen: 169kB und Größe: 50MB. (Die Größe zeigen Chrome und Opera nicht.) Ganz schön krass dieses gzip, aus 50 mach 0,17. (Ich weiß, liegt am Inhalt, aber trotzdem.)

Da bin ich ja mal gespannt, was sich da in Contao ändern wird.

Wenn ich aber mit jQuery-JS das Layout manipuliere, dann sollte es trotzdem vor dem Rendern geladen werden, sonst sähe man ja die Umstellung vor/nach JS. Richtig?

[Spooky]

Wenn ich aber mit jQuery-JS das Layout manipuliere, dann sollte es trotzdem vor dem Rendern geladen werden, sonst sähe man ja die Umstellung vor/nach JS. Richtig?

Jein. Bei deinem Beispiel Code ist es egal, da du das JavaScript sowieso erst ausführen lässt, wenn der gesamte DOM geladen ist. Der Browser rendert ja schon bevor der gesamte DOM geladen ist.

[mandrake]

Zitat: “Da bin ich ja mal gespannt, was sich da in Contao ändern wird.“

Das bin ich auch. Ich fürchte nur - und hoffe, dass ich mich irre - dass Leo es auch in diesem Punkt leider - einmal mehr - vergeigen wird.

[Andreas]

Das hier müsste aber schneller gehen

1. jQuery laden (blockiert 1sec)
2. DOM wird gerendert (ist also sichtbar)
3. Manipulation wenn DOM komplett

als das hier

1. DOM wird gerendert (ist also sichtbar)
2. jQuery laden (blockiert 1sec)
3. Manipulation wenn DOM komplett

[Spooky]

Ja, aber hier gilt die "above-the-fold" Problematik zu beachten. Idealerweise brauchst du für den above-the-fold Inhalt keine externen Ressourcen. Wenn du die Website darauf hin optimiert hast, kannst du alle externen Libraries erst am Ende des <body> laden lassen. Somit wird die Seite dem Besucher dann schnellst-möglich dargestellt.

[Andreas]

Nur mal als Beispiel die Seite hier achim-zeman.de/fly_high.html. Da habe ich das Menü ganz schön mit JS bearbeitet und dann ist da noch der Slider. Das ist doch alles above-the-fold. D.h. da sollte sowas erst gar nicht gemacht werden? Also keinen Slider above-the-fold?

[mlweb]

Das bin ich auch. Ich fürchte nur - und hoffe, dass ich mich irre - dass Leo es auch in diesem Punkt leider - einmal mehr - vergeigen wird.

Das oben verlinkte github-issue wurde im letzten öffentlichen Mumble-Call am 05.10. durchgesprochen. Es wäre doch sicher eine gute Idee, wenn Du vielleicht beim nächsten Mumble Call dabei sein kannst und etwas dazu sagst. Ich war bei dieser Thematik eher stiller Zuhörer.
Die Problematik an sich ist mir zwar prinzipiell bekannt, aber wie man das sauber in Contao lösen kann, insbesondere auch in Bezug auf Erweiterungen das sind für mich "Böhmische Dörfer".

[mlweb]

Wie verhält sich das ganze eigentlich mit HTTP/2 und HTTP/2 Push. So ganz im Detail ist mir das in dem Fall noch nicht klar. Ich glaube mal verstanden zu haben, dass das Laden von Skripten im Header, dann nicht mehr so kritisch ist.
https://www.webhosting-franken.de/wa...ringt-mir-das/

Hier wird für HTTP/2 Push sogar eine Extension für Contao erwähnt, habe ich aber bisher noch nicht getestet bzw. mich nicht intensiv damit beschäftigt.

[Schnippel]

Über HTTP1 und HTTP2 hab ich auch schon was gelesen.

Prinzipell ist es doch so, daß Contao alles Dateien wie CSS (mehrere CSS-Dateien Interene und Externe), JS in eine jeweils komprimierte Datei packt und diese dann mit einmal ausliefert, oder?
Das sollte man wohl auch so machen bei HTTP1.

Wenn ich das mit HTTP2 richtig verstanden habe, sollte die Ladezeit kürzer sein, wenn die einzelnen Dateien nicht zu einer großen Ganzen zusammengefasst werden, sondern einzeln stehen bleiben, weil diese parallel geladen werden können, oder?

[Andreas]

Kombinierte Datei, nicht komprimierte.

Jein, Contao macht das mit den CSS-Dateien, welche man im Layout anhaken kann

• CSS-Framework
• Interne Stylesheets
• Externe Stylesheets

Bei Erweiterung ist man darauf angewiesen, dass der Entwickler das Flag "|static" benutzt damit sie in den Combiner kommt.

$GLOBALS['TL_CSS'][] = 'path/to/style.css|static'; 

Selber kann man auch noch CSS-Dateien einbinden, welche nicht in den Combiner kommen. Im Layout Eigene Head-Tags oder direkt im fe_-Template.

Die JS-Dateien welche über die j_/moo_-Templates eingebunden werden kommen nicht in den Combiner.

Bei JS-Dateien in Erweiterungen entscheidet auch wiederum der Entwickler - im HEAD, am Ende von BODY, mit |static in den Combiner, oder per Script dynamisch in den HEAD gesetzt.

[Spooky]

Nur mal als Beispiel die Seite hier achim-zeman.de/fly_high.html. Da habe ich das Menü ganz schön mit JS bearbeitet und dann ist da noch der Slider. Das ist doch alles above-the-fold. D.h. da sollte sowas erst gar nicht gemacht werden? Also keinen Slider above-the-fold?

Wenn du ganz oben einen Slider hast, dann muss man mehr oder weniger damit leben, dass die Seite halt erst mal (beim ersten Besuch) nicht gleich sofort gezeigt wird. Je nach Budget und Anspruch programmiert man sich den above-the-fold Content so effizient wie möglich .

[Schnippel]

Hi Leute,

hab da noch ein paar Fragen:

Frage 1:

die Einbindung meines jQuery funktioniert. Es steht aber im HEAD-Bereich.
Wie bekomme ich es in den BODY?

Hier nochmal die Script-Datei:

(function($) {
  $(document).ready(function() { 
    $('nav.mod_navigation ul li.submenu > a').click(function() {
          $(this).parent().siblings().find('ul').slideUp(300);
	  $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
    });
  });
})(jQuery);

... welche in einem eigenem Template liegt:

<?php
 $GLOBALS['TL_JAVASCRIPT'][] = 'files/js/navi_dropdown_click.js|static';
?>

Weiter oben wurde von Andreas beschrieben, daß man mit

$GLOBALS['TL_BODY'][] = 'string'; 

dies in den BODY bekommt.

Für mich als Anfänger stellt sich jetzt die Frage, was ich wo machen muß.

Wenn ich diese Anweisung in mein Tempalte einbinde,

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/navi_dropdown_click.js|static';
$GLOBALS['TL_BODY'][] = 'files/js/navi_dropdown_click.js|static'; 
?>

dann passiert bei mir nix. Alles noch im HEAD-Bereich.
Was muß wie getan werden?

Frage 2:

Die zweite Frage, die ich mir stelle ist folgende:
Das Script spricht die Navigation an. Da dies ein wichtiges Element auf der Seite ist,
macht es dann Sinn, diese im BODY zu packen, oder doch lieber im HEAD zu lassen?
Wobei ja mit der Anweisung

 $(document).ready(function() {....

die Ausführung eh erst passiert, wenn alles geladen wurde. Oder?


Frage 3:

Andreas schreibt:

Ich benutze auch j_-Templates, z.B. j_misc.html5.

Dieses Template finde ich nicht. Ist dies eine Erweiterung, die ich erst noch installieren muß?

[Spooky]

Nein, das ist ein Template das du selbst anlegst. Dort schreibst du entweder direkt deinen JavaScript Code hinein oder

<script src="files/js/navi_dropdown_click.js"></script>

Und dann aktivierst du das Template in deinem Seitenlayout. Damit erübrigt sich auch Frage 1

[Spooky]

Frage 2:

Die zweite Frage, die ich mir stelle ist folgende:
Das Script spricht die Navigation an. Da dies ein wichtiges Element auf der Seite ist,
macht es dann Sinn, diese im BODY zu packen, oder doch lieber im HEAD zu lassen?
Wobei ja mit der Anweisung

 $(document).ready(function() {....

die Ausführung eh erst passiert, wenn alles geladen wurde. Oder?

Eben, daher ist es prinzipiell egal. Du könntest dein Script als HTML Modul direkt nach dem Navigationsmodul im Seitenlayout einfügen - und dann ohne $(document).ready. Dann wird dein Script sofort ausgeführt, wenn das Navigationsmodul im DOM bereitsteht.