Störungen mit Nutzung von jQuery

[R-bert]

Hallo Contao-Gemeinde,

ich bin begeisterter Contao-Beginner und frisch registriert. Ich bin gleich mal auf ein (für mich) unlösbares Problem gestoßen und literaturseitig habe ich für Contao / Contao 4 leider sehr wenig gefunden.

Ich habe Installation auf einer Subdomain eingerichtet. Dort habe ich von einem externen Reservierungsdienstleister ein Javascript-Schnipsel als Frontend-Modul eingefügt, damit eine grafische Reservierungsmöglichkeit direkt unter dem Hauptmenü erscheint. So sparen wir uns das aufwendige Entwickeln einer Reservierungsfunktion. Das funktionioniert sehr gut.

Gleichzeitig möchte ich aber die Webseite mit jQuery-Funktionen aufpeppen. Ich habe daher die jQuery-JS-Datei in der aktuellen Version von jquery.com heruntergeladen und im Contao-BE unter "Files" abgelegt. Dann habe ich diese Datei im Seitenlayout (mit <script src="files/themes/theme_robby/jquery-3.3.1.js"></script>) unter "zusätzliche Head-Tags" eingebunden. Die entspr. jQuery-Funktionen möchte ich dann in den entspr. Artikeln über das HTML-Inhaltselement aufrufen. Das klappt auch ganz gut.

ABER: Wenn ich die eingebundene jQuery-JS-Datei über das Einbinden unter "zusätzliche Head-Tags" nutze, dann funktioniert die extern eingebundene Reservierungsleiste nicht mehr. Der grafische Monatskalender, die grafisch auswählbaren Uhrzeiten usw. klappen beim Klick nicht mehr auf.

Frage 1:
Gibt es eine Lösung für diese unverträglichkeit?

Frage 2:
Wenn ich das Einbinden der externen jQuery-JS-Datei unter "zusätzliche Head-Tags" lösche und ein Häkchen im Seitenlayout bei "jQuery laden" setze. Dann funktioniert die oben genannte Reservierungsleiste auch nicht mehr.

noch eine allerletzte Frage:
Stehen beim Aktivieren des Häkchens im Seitenlayout ALLE jQuery-Funktionen zur Verfügung oder nur die Funktionen für die darunter aufgelisteten Funktionen wie accordion, colorbox usw. ? Denn meine jQuery-Funktions-Aufrufe in den Inhaltselementen funktionieren nur, wenn ich die jQuery-JS-Datei unter "zusätzliche Head-Tags" einbinde und NICHT, wenn ich ein Häkchen bei "jQuery laden" im Seitenlayout setze.
(PS: Dann funktioniert aber wieder die eingebettete Reservierungsleiste (siehe oben) nicht mehr).

Ich wäre Euch für ein paar Erklärungen, die auch ein CONTAO-ANFÄNGER versteht, sehr dankbar.

Viele Grüße!

Robert

==============

Hier noch ein Link auf die Seite: LINK
Achtung es ist noch eine Baustelle.
Ich habe die Einbindung der heruntergeladenen jQuery-JS-Datei über "zusätzliche Head-Tags" hier ausgeschaltet, damit man sich die funktionierende Reservierungsleiste anschauen kann.

Und hier noch der Code vom Reservierungsdienstleister, der uns übergeben wurde und den ich als Frontend-Modul eingebunden habe:
<div class="opentable_web">
<script type="text/javascript" src="https://secure.opentable.de/frontdoor/default.aspx?rid=106845&restref=______HIER_etwas_e liminiert_von_Robert________=ffffff&btnbgimage=htt ps://secure.opentable.de/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=light&mode=wide& hover=1"></script>
<!-- <a href="http://www.opentable.de/single.aspx?rid=106845&rtype=ism&restref=106845" class="OT_ExtLink">_hier_etwas_elimieniert_von_Rob ert___Restaurant, Cafe [&] Lounge (106845), Frankfurt / Taunus Reservierungen</a>
-->
<br class="clear">
</div>

[Spooky]

Du musst jQuery wieder aktivieren, um das eigentliche Problem analysieren zu können.

[lucina]

Schau doch mal bitte in den Quelltext und die Entwicklertools im Browser. Das von Dir genannte Tool bindet ebenfalls jQuery ein (von cdn.otstatic.com), und zwar in der Version 1.7.2. Gleichzeitig versuchst Du - wenn das so stimmt wie Du es beschrieben hast - zusätzlich jQuery 3 einzubinden. Ich bin mir nicht sicher ob das eine gute Idee ist, jQuery in zwei Versionen gleichzeitig dabei zu haben.

Schliesslich sehe ich auch noch einen Aufruf zur Einbindung von Mootools, und das ist ganz sicher ein Weg um sich Ärger und Inkompatibilitäten einzuhandeln. Ich verstehe auch nicht, warum man zwei JS-Frameworks gleichzeitig nutzen sollte.

Also: Schau mal was Du wirklich brauchst und haben möchtest. Wenn es eine bestimmte jQuery-Version sein soll, dann ziehe die (hoffentlich vohandene) Dokumentation von OpenTable zu Rate. Überlege, welche Funktionen Du zum Aufpeppen benötigst. Möglicherweise kannst Du die auch mit verträglichem Vanilla-JS realisieren. Viel hilft nicht immer viel.

eigenes JavaScript kannst Du entweder über ein Template j_meinScript.html5 ins Seitenlayout einbinden oder direkt den Bereich 'eigenes Javascript' im Layout schreiben. Javascriptaufrufe in den Head zu setzen ist meistens eine suboptimale Idee, das hängt aber sicher auch von Deiner Serverkonfiguration ab. In den allermeisten Fällen blockt JS im Head erst einmal alles andere, und meistens möchte man das nicht. Man möchte schnelle Seiten ohne blockierendes JS zu einem frühen Zeitpunkt.

[R-bert]

Hallo Spooky,
hallo lucina,

vielen Dank für die schnellen Antworten. Ich habe - wie von Dir Spooky empfohlen - schnell das Häkchen im Seitenlayout wieder gesetzt, damit man das Problem besser analysieren kann. Man sieht eigentlich, dass der grafische Kalender, die grafische Uhrzeit usw. dann nicht mehr aufklappen.

Gleichzeitig habe ich schnell mal - wie von Dir lucina empfohlen - das Häkchen bei "MooTools laden" rausgenommen (damit wollte ich später einen Akkordeon realisieren).

-> Das aktivieren von "jQuery laden" und das gleichzeitige Deaktivieren von "MooTools laden" sowie das NICHT-Einbinden der heruntergeladenen jQuery-JS-Datei im head hat schon mal zu einer Teillösung geführt: Ich kann (nach einmaliger ganz kurzer Prüfung) meine kleinen jQuery-Funktionen/Effekte nutzen. -> Was mit diesen Einstellungen immer noch nicht geht - und das ist das Hauptproblem - ist die eingebundene Reservierungsfunktion (aufklappen des grafischen Kalenders usw.).
Wenn ich es umgekehrt mache und "jQuery laden" deaktiviere ("MooTools laden" bleibt aus und die heruntergeladene jQuery-JS-Datei bleibt auch nicht eingebunden), dann läuft die Reservierungsfunktion einwandfrei, aber meine kleinen jQuery-Aufrufe funktionieren dann nicht.

Es ist mit Sicherheit so, wie lucina schreibt: Das eingebettete Reservierungstool bindet jQuery ein (von cdn.otstatic.com), und zwar in der Version 1.7.2. Gleichzeitig binde ich zusätzlich jQuery 3 ein. Das verträgt wohl sich nicht. Aber leider funktionieren meine kleinen nützlichen jQuery-Aufrufe (die ich in HTML-Inhaltselementen einbaue) nur, wenn ich "jQuery laden" im Seitenlayout aktiviere ODER jQuery 3 im Head einbinde. Ich brauche scheinbar beides: jQuery (von cdn.otstatic.com) in der Version 1.7.2. und gleichzeitig das aktivierte "jQuery laden" im Seitenlayout.

Kann man das irgendwie so basteln, dass ich beide jQuerys problemlos nutze? Oder gibt es eine andere Möglichkeit?

Deine nützlichen weiteren Anmerkungen, lucina, werde ich auf jeden Fall noch berücksichtigen. Da kann ich mich aber erst später dransetzen, da das ggf. etwas länger dauert.

Gruß!

Robert