JavaScript über javascriptInit laden (Reihenfolge)

  • Hallo Community,

    es wird irgendwas ganz Banales sein, aber ich komme nicht drauf. Zu Beginn der Entwicklung eines Pakets habe ich für extra CSS einen TemplateListener registriert auf stylesheets@headInclude. Damit ich es etwas einfacher habe und schneller entwickeln konnte, habe ich über den selben TemplateListener auch JavaScript geladen:
    <script src="/js/library.js"></script>.

    Mein Code, den ich im Template einer Page (showDiagram.tpl) geschrieben habe, funktioniert wunderbar (kurzer Ausschnitt):

    Code
    <script data-relocate="true">
        async function loadDiagram() {
            var container = document.getElementById('js-canvas');
            var viewer = new DiagramJS({
                // .... nutzt die zuvor eingebundene library
            });
        }
    </script>

    Nachdem ich jetzt aufräumen will, habe ich einen TemplateListener auf javascriptInit@headIncludeJavaScript registriert und wollte die Library darüber einbinden. Leider funktioniert mein Code im Template anschließend nicht mehr. Ich schätze, es liegt irgendwie an der Reihenfolge, denn wenn ich JavaScript "data-relocate = true" bzw. über <script data-relocate="true" src="/js/bpmn.js"></script> einbinde, funktioniert es auch im templateListenerstylesheets@headInclude nicht mehr.

    TemplateListener stylesheets@headInclude (funktioniert). Gleicher auf javascriptInit@headIncludeJavaScript funktioniert nicht mehr.

    Code
    {if $templateName === 'showDiagram' && $templateNameApplication === 'wcf'}
    <script src="/js/library.js"></script>
    {/if}

    Hat irgendjemand eine Idee, wieso das so ist?

    Edited once, last by itsmeJAY (November 16, 2023 at 11:19 PM).

  • itsmeJAY November 16, 2023 at 11:16 PM

    Changed the title of the thread from “JavaScript in stylesheets funktioniert, aber in javascriptInit nicht” to “JavaScript über javascriptInit laden (Reihenfolge)”.
  • javascriptInit@headIncludeJavaScript

    WCF/com.woltlab.wcf/templates/headIncludeJavaScript.tpl at 8c24622936f986ae6697f533fabafc06bd6be158 · WoltLab/WCF
    WoltLab Suite Core (previously WoltLab Community Framework) - WoltLab/WCF
    github.com

    {event name='javascriptInclude'}

    Auf das event schon probiert?


    //edit:

    siehe auch, wo das Event 'javascriptInit' im Template gesetzt ist. Wenn ich mich nicht irre, passt dein Code da nicht so richtig rein:

    WCF/com.woltlab.wcf/templates/headIncludeJavaScript.tpl at 8c24622936f986ae6697f533fabafc06bd6be158 · WoltLab/WCF
    WoltLab Suite Core (previously WoltLab Community Framework) - WoltLab/WCF
    github.com

    {if $templateName === 'showDiagram' && $templateNameApplication === 'wcf'} <script src="/js/library.js"></script> {/if}

    Managed Webhosting, hochwertige Plugins und individuelle Auftragsarbeiten:

    Julian-Pfeil.de

    Edited 2 times, last by Julian Pfeil (November 17, 2023 at 12:24 AM).

  • Hi Julian,

    danke für deine Antworten.

    {event name='javascriptInclude'}

    Auf das event schon probiert?

    ja, das hatte ich tatsächlich sogar davor probiert und bin dann nach Recherche und einigen Beiträgen im Forum noch einmal geswitcht.

    Folgendes probiert, allerdings erfolglos:

    Code
            <templatelistener name="includeDiagramJs">
                <environment>user</environment>
                <templatename>headIncludeJavaScript</templatename>
                <eventname>javascriptInclude</eventname>
                <templatecode><![CDATA[{include file='__DiagramJs'}]]></templatecode>
            </templatelistener>
    Code
    {if $templateName === 'showDiagram' && $templateNameApplication === 'wcf'}
        <script src="/js/library.js"></script>
    {/if}

    Sobald ich den folgenden templateListener dafür verwende, klappt es:

    Code
            <templatelistener name="includeDiagramCss">
                <environment>user</environment>
                <templatename>headInclude</templatename>
                <eventname>stylesheets</eventname>
                <templatecode><![CDATA[{include file='__DiagramCss'}]]></templatecode>
            </templatelistener>

    Ebenfalls mit:

    Code
    {if $templateName === 'showDiagram' && $templateNameApplication === 'wcf'}
        <script src="/js/library.js"></script>
    {/if}
  • Zunächst einmal: "Funktioniert nicht" ist keine Fehlerbeschreibung. Mein erster Ansatzpunkt wäre ein Timing-Problem, je nachdem was in deiner Library passiert. Probiere es mal hiermit:

    JavaScript
    require(["/js/library.js"], () => {
      // code
    });

    Falls das nicht hilft: Wie lautet die Fehlermeldung?

  • Hallo Alexander Ebert,

    es handelt sich bei der Library (dem Diagramm Viewer) um BPMN 2.0 um Business Process Model and Notations als Diagramme anzuzeigen. Auch eine externe Einbettung über <script src="https://unpkg.com/bpmn-js@15.1.3/dist/bpmn-viewer.development.js"></script> bringt nicht den gewünschten Erfolg.

    Mysteriös ist auch, dass die Konsole ziemlich viele Fehler anzeigt, wenn ich das javascriptInclude Event nutze, die gar nichts mit BPMN zutun haben:

    Sobald ich über das stylesheets Event gehe, ist die Konsole ohne Fehler und alles funktioniert, wie es soll. Ich habe den gesamten JavaScript-Code aus dem Template testweise entfernt, um Fehler dort auszuschließen. Trotzdem werden weiterhin Fehler in der Konsole angezeigt. Es liegt also definitiv an der Einbettung der JavaScript-Datei über dasjavascriptInclude Event.

  • Das dürfte das javascriptInit-Event sein, welches ich erwähnt hatte.


    //e: Der Code passt dort übrigens nach wie vor nicht rein. Führt das eventuell zu JS-Fehlern?

    Ich hatte tatsächlich zuerst das javascriptInit Event genutzt und dann geändert. Die Entwickler-Tools haben beim abgleichen des Projekts aber scheinbar weiterhin beide verwendet. Nach Paket-Deinstallation und Neu-Installation passt zumindest wieder die Position im Quelltext. :D Ändert leider aber nichts an den Fehlern.

  • Mysteriös ist auch, dass die Konsole ziemlich viele Fehler anzeigt, wenn ich das javascriptInclude Event nutze, die gar nichts mit BPMN zutun haben:

    Oder mit anderen Worten: Die von dir eingebundene Bibliothek liefert einen eigenen Loader mit, der die von uns genutzte require.js-Bibliothek lahmlegt.

  • Oder mit anderen Worten: Die von dir eingebundene Bibliothek liefert einen eigenen Loader mit, der die von uns genutzte require.js-Bibliothek lahmlegt.

    Ja, so etwas ähnliches habe ich mir gedacht, da ich gerade das Skript testweise extern direkt in das Template headIncludeJavaScript eingebunden habe unter dem javascriptInclude Event komplett unabhängig von irgendwelchen Paketen / Projekten. Die Fehler waren die gleichen.

    Aber wieso funktioniert es, wenn ich es weiter oben ansiedel in den stylesheets? Hast Du eine Idee, wie ich es trotzdem ordnungsgemäß umgesetzt bekomme?

    Vielen Dank vorab!

  • Aber wieso funktioniert es, wenn ich es weiter oben ansiedel in den stylesheets?

    Zu dem Zeitpunkt wurde unsere JavaScript-Komponenten noch nicht geladen.

    Hast Du eine Idee, wie ich es trotzdem ordnungsgemäß umgesetzt bekomme?

    Oftmals gibt es verschiedene Varianten von Bibliotheken, um eben solche Konflikte zu umgehen. Einfach mal ausprobieren! :)

  • Zunächst einmal: "Funktioniert nicht" ist keine Fehlerbeschreibung. Mein erster Ansatzpunkt wäre ein Timing-Problem, je nachdem was in deiner Library passiert. Probiere es mal hiermit:

    JavaScript
    require(["/js/library.js"], () => {
      // code
    });

    Falls das nicht hilft: Wie lautet die Fehlermeldung?

    Du hattest mal wieder Recht :). Ich hatte es gestern bereits getestet, da ging es nicht, weil ich den templateListener noch aktiv hatte. Ich habe den templateListener für JavaScript jetzt gänzlich entfernt und lediglich require(["/js/bpmn.js"], (BpmnJS) => {genutzt. Siehe da, es funktioniert.

    Code
      <script data-relocate="true">
        require(["/js/bpmn.js"], (BpmnJS) => {
        async function loadBpmn() {
            var container = document.getElementById('js-canvas');
            var viewer = new BpmnJS({
            // ...
            });
            
            // ...

    Danke euch beiden für eure Unterstützung! ;)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!