Einbindung von Javascript jQuery in Contao 4 - Anleitung

**Andreas** · 13.10.2017, 12:05

Zitat von Schnippel

Weiter oben wurde von Andreas beschrieben, daß man mit

PHP-Code:


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

Ich habe das oben nochmal verbessert. Mit String war ein HTML-String gemeint - <script>...
https://community.contao.org/de/show...l=1#post453044

Zitat von Schnippel

PHP-Code:


<?php

...

$GLOBALS['TL_BODY'][] = 'files/js/navi_dropdown_click.js|static';

?>

Dies geht nicht. Einen Pfad kannst du nur bei TL_JAVASCRIPT benutzen. Siehe auch oben in dem verbesserten Thread

Zitat von Schnippel

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

Hatte ich glaube ich oben erklärt, dass sich das ready Event nicht auf "alles" bezieht. Nur auf den DOM.

**Andreas** · 13.10.2017, 12:10

Zitat von Spooky

Dann wird dein Script sofort ausgeführt, wenn das Navigationsmodul im DOM bereitsteht.

Spooky hat natürlich Recht, aber du brauchst dir deswegen IMHO kein Bein auszureißen. In der Praxis reicht meisten der Aufruf nach DOM ready und wird das meistens ans Ende von <body> oder in einer eigenen JS-Datei, welche entweder im HEAD oder am Ende von <body> geladen wird reingebracht.

**Spooky** · 13.10.2017, 12:21

Das kann man pauschal nicht sagen. In seinem Fall würde es durchaus Sinn machen das so zu machen. Bedient der User die Navigation schon bevor der DOM fertig aufgebaut ist (was durchaus hin und wieder passieren kann), wird das Klick Event nicht abgefangen und der Link direkt aufgerufen, anstatt das Submenu ausgefahren.

**Schnippel** · 03.12.2017, 15:53

Hi Leute,

wie lässt sich bei einer DropDown per KLICK - Navigation das geöffnete Submenü wieder schließen, wenn man irgendwo auf der Seite klickt, ohne dabei einen Link klicken zu müssen?

Unbenannt-7.png

Das DEMO ist hier zu sehen: http://html-tuts.com/demo/jquery-dro...nu/click-fade/

Was eben fehlt ist die Möglichkeit des Schließens bei klick, auch wenn kein Link angeklickt wird.

**Andreas** · 03.12.2017, 18:44

Falscher Thread, siehe Thread-Titel.

Sowas fragst du auch am besten den Entwickler des JS-Menüs, welches du da im Einsatz hast. Als Ansatz kann ich dir schon mal sagen, dass du wohl einen Click-Event-Listener auf den gewünschten Bereich aufsetzen musst und wenn dann geklickt wid darauf reagieren musst.

**Schnippel** · 26.12.2017, 13:16

Hi Leute,
ich brauche nochmal Eure Hilfe, um paar Dinge zu verstehen.

Ich habe folgendes gemacht:

Schritt 1: Eine Datei mit dem Namen scrolling.js angelegt, die folgenden Code beinhaltet:

Code:

(function($) { 
	$(document).ready(function(){
	  $(window).scroll(function() {
		if ($(document).scrollTop() > 50) {
		  $("body").addClass("down");
		} else {
		  $("body").removeClass("down");
		}
	  });
	});
})(jQuery);

Diese dient dazu, daß beim Scrollen der Body die Klasse .down erhält. Über das CSS werden dann bestimmte Dinge umgestaltet, sobald .down im Body steht.

Schritt 2: Template mit dem Namen j_scrolling.html5 angelegt, das folgenden Inhalte hat:

PHP-Code:


<?php

$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';

?>

Schritt 3: im BA > Seitenlayout dieses Template bei jQuery aktivert.

Das Ganze funktioniert auch.

Jetzt zu meinen Fragen:

Frage 1:
Was bedeutet im Template genau das hier ROT-Markierte mit dem TL_JAVASCRIPT ?

Code:

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

Frage 2:
Im Quelltext ist das Script zu sehen im HEAD-Bereich. Wenn ich das hier im Forum richtig verstanden habe, dann sollte man
nicht ganz so wichtige Scripte wegen der Ladegeschwindigkeit nicht im HEAD-Bereich, sondern im BODY unten unterbringen.

Wie bekomme ich das Ganze nun in den BODY runter? Was muß ich da wo genau eintragen?

Frage 3:
Wozu dient nochmal genau |static ?

Wenn ich im Template dies mit einfüge, so wie hier...

Code:

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

... dann ist das Script weder im HEAD noch im BODY zu sehen. Was passiert da im Hintergrund?

**Andreas** · 28.12.2017, 19:57

PHP-Code:


$GLOBALS['TL_JAVASCRIPT']

Das ist ein PHP-Array. Du kannst es testen mit

PHP-Code:


print_r($GLOBALS['TL_JAVASCRIPT']);

Mit dem "[]" übergibst du diesem Array eine neue Variable. In deinem Fall den Pfad zu einer JS-Datei als String.

Mit dem Flag "|static" teilst du mit, dass Contao diese Datei über den Combiner mit in die eine große JS-Datei packen soll, welche im FE aus dem assets/-Ordner geladen wird.

Die Templates j_, moo_ und js_ werden über das fe_-Template am Ende des BODYs ausgegeben. Du kannst dort also z.B. direkt den Aufruf einer Datei in HTML reinschreiben.

j_scrolling.html5:

HTML-Code:

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

Befindet man sich in einem Template, welches nicht bereits am Ende des BODYs ausgegeben wird, dann kann man diesen HTML-Code auch über TL_BODY dort hin bekommen:

PHP-Code:


$GLOBALS['TL_BODY'][] = '<script src="files/js/scrolling.js"></script>';

**Schnippel** · 29.12.2017, 08:53

Mit dem Flag "|static" teilst du mit, dass Contao diese Datei über den Combiner mit in die eine große JS-Datei packen soll, welche im FE aus dem assets/-Ordner geladen wird.

Und diese JS-Datei steht dann am Ende von BODY? Ich seh da in der Quelltext-Ansicht aber nix...

Unbenannt-1.jpg

**Spooky** · 29.12.2017, 09:23

Nein, das was du in TL_BODY einfügst steht am Ende des body.

**dirksche** · 24.01.2019, 15:33

Hallo,

ich stehe gerade etwas auf dem Schlauch.
Wie binde ich denn folgendes Script im Body ein?

Code:

<script>
	var mymap = L.map("mapid").setView([<?= $this->latitude ?>, <?= $this->longitude ?>], 13);

	L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", {
		maxZoom: 18,
		id: "mapbox.streets"
	}).addTo(mymap);
	
	L.marker([<?= $this->latitude ?>, <?= $this->longitude ?>]).addTo(mymap);
</script>

Das Problem sind die PHP Variablen im Script. Mit $GLOBALS['TL_BODY'][] = funktioniert das nicht.

**Spooky** · 24.01.2019, 15:40

Du fügst das in ein Template ein, erzeugst dir das Template in PHP, parst es und fügst es dann in den body ein.

**dirksche** · 24.01.2019, 16:43

Sorry, ich kann Dir noch nicht ganz folgen.

Ich habe mir z.B. ein eigenes Inhaltselement mit dem Rocksolid Custom Elements gebastelt und würde nun gerne in diesem Template (rsce_meinelement.html) den JS Code einbauen. Das funktioniert auch, doch der JS Code steht so mitten i Quelltext und nicht unten am Body.

Mit

Code:

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

funktioniert es nicht, weil ich ja PHP Variablen im Script einsetzen möchte.

Wie würde also Dein "Trick" aussehen?

**Spooky** · 24.01.2019, 16:52

du erzeugst dir eine neue Datei namens /templates/my_script.html5, fügst dort deinen JavaScript Code ein, lädst das Template in deinem RSCE Template und fügst es in den Body ein:

PHP-Code:


$template = new \Contao\FrontendTemplate('my_script');

$template->setData(…);

$GLOBALS['TL_BODY'][] = $template->parse();

**dirksche** · 24.01.2019, 17:22

Aber wie kann ich dann z.B. die Variable

Code:

<?= $this->latitude ?>

an mein Script übergeben, wenn dieses ja unter my_script.html5 ausgelagert ist?
Das ist mir noch nicht ganz klar.
Wird das dann mit

Code:

$template->setData(…);

gemacht? Was kommt da genau zwischen die Klammern?

**dirksche** · 25.01.2019, 07:40

Also ich habe es nach Deiner Anleitung umgesetzt. In meiner script_trackingcode.html steht folgendes:

Code:

<script>
	var mymap = L.map('mapid').setView([<?= $this->latitude; ?>, <?= $this->longitude; ?>], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		id: 'mapbox.streets'
	}).addTo(mymap);
	
	L.marker([0, 0]).addTo(mymap);
</script>

und mit meinem rsce Template folgendes:

Code:

<?php
$template = new \Contao\FrontendTemplate('script_trackingcode'); 
$template->setData($this->arrData = $arrData); 
$GLOBALS['TL_BODY'][] = $template->parse();
?>

Die Werte der beiden Variablen '<?= $this->latitude; ?>' und '<?= $this->longitude; ?>' werden nicht übergeben.
Was mache ich falsch?

**fiedsch** · 25.01.2019, 07:50

Zitat von dirksche

Code:

$template->setData($this->arrData = $arrData);

Wieso übergibst Du in setData() eine Zuweisung als Parameter? Du solltest den Datenarray übergeben, in dem Du vorher Deine Daten gespeichert hat.

**Spooky** · 25.01.2019, 08:00

Und $arrData ist vermutlich leer?

**dirksche** · 25.01.2019, 08:07

Und wie übergebe ich die Werte in $arrData? So?:

Code:

$template->setData($this->arrData = $this->latitude);

**Spooky** · 25.01.2019, 08:12

Das Contao Forum sollte eigentlich keine grundsätzliche PHP Lernhilfe sein, aber ok

Mit setData wäre es so:

PHP-Code:


$template->setData([

  'latitude' => $this->latitude,

  …

]);

Du kannst es auch so machen:

PHP-Code:


$template->latitude = $this->latitude;

…

Brauchst du das JavaScript überhaupt am Ende des <body>? Wenn du damit eine Google Map erzeugst, wo das RSCE Template auch den Container ausgibt, schadet es ja nicht, wenn das <script> gleich direkt danach kommt.