JavaScript im Ajax-Backend

Druckbare Version

07.05.2026, 16:19
462

JavaScript im Ajax-Backend

Mit der Umstellung des Backends vom kompletten Seitenload auf Ajax-Reloads werden in der Anzeige keine in z.B. XLabel eingebundene JavaScripts <script></script> oder <script src="xxx.js"></script> mehr ausgeführt, wobei ein referenziertes, externes Scripte laut F12-Netzwerkanalyse sogar geladen wird. Lädt man die Seite manuell nach, funktioniert es natürlich und es wird normal ausgeführt.

Gibt es irgendeinen Event, den Contao ggf. selbst erzeugt und in den man sich einhängen kann, oder eine andere Möglichkeit, dass eigene Scripte auch bei den Ajax-Reloads gestartet werden können?
07.05.2026, 16:34
Spooky

Zitat:

Zitat von 462

werden in der Anzeige keine in z.B. XLabel

Was genau meinst du mit XLabel?

Zitat:

Zitat von 462

<script></script> oder <script src="xxx.js"></script> mehr ausgeführt

Wie genau hast du diese JavaScripts eingebunden?

Grundsätzlich ist es so, dass mit Turbo nur der <body> Replaced wird (oder tlw. auch nur <turbo-frame>s). Dein JavaScript muss daher mit dynamisch nachgeladenen Inhalt klar kommen (Stichwort Mutation Observer oder Stimulus). Dein JavaScript muss außerdem entweder Global im <head> geladen sein, über $GLOBALS['TL_JAVASCRIPT'] (wodurch es automatisch einen Refresh geben wird) oder im <body> mit <script>.
07.05.2026, 22:56
462

Mit dem XLabel Callback kann man noch eigene Informationen in das Label der Eingabe eines Tabellenfeldes hinzufügen. Hier kann ja (fast) beliebiges HTML und unter anderem <script>-Tags eingebunden werden, mit dem ich zum Beispiel zusätzliche Informationen aus dem aktuell eingegebenen Text auf der Tabelleneingabeseite erzeuge.

Dafür ist das zwar wahrscheinlich eigentlich nicht vorgesehen (da es ja an das Ende in ein <h3> eingebaut wird), funktionierte aber inklusive einem Hinzufügen eines EventListener auf DOMContentLoaded im "alten" Backend prima, da das DOM insgesamt neu geladen wurde.

Im "neuen" Backend wird aber per Ajax eben nur ein Teil der Seite nachgeladen und irgendwo in ein innerHTML geschrieben und somit werden, wie normal üblich, weder ein nachgeladenes Inline-Script noch eine durch das Nachladen referenzierte js-Datei ausgeführt. Zusätzlich gibt es auch kein DOMContentLoaded mehr (was man durch einen MutationsObserver wiederum ersetzen kann).

Letztendlich ist es erst mal egal, wo das <script> steht. Die Funktion darin muss mit dem Nachladen gestartet werden.

Die Lösung wäre wohl nur ein MutationObserver, der den <body> auf das Ändern des kompletten DOM überwacht. Der Observer müsste ja dann aber immer global das komplette BE überwachen, falls mal irgendwann was entsprechendes nachgeladen wird. Ist irgendwie nicht wirklich elegant.

Je länger ich so darüber nachdenke, gibt es aktuell wohl keine wirkliche Möglichkeit, ausschließlich aus dem nachgeladenen Teil <script>-Funktionalitäten selbst zu starten ohne zuvor den ladenden Teil angefasst zu haben. Selbst wenn es einen zentralen Event geben würde, dass etwas nachgeladen wurde, könnte der EventListener darauf ja nicht im nachgeladenen Teil gesetzt werden.
08.05.2026, 07:44
Spooky

Nachgeladene <script>s werden wie gesagt ausgeführt.

Den MutationObserver machst du nicht am <body>, sondern auf den Elementen, die dich interessieren.