Reihenfolge: jQuery / mootools

[07alex07]

er verwendet die Version 3.5.12

[Sabaid]

Laut Debugging verursacht ein hide Event von jQuery, dass MooTools das Element versteckt.

Wie genau hast du bootstrap installiert? Verwendest du die Paketverwaltung und hast die entsprechende Contao Extension installiert? Oder hast du bootstrap manuell integriert? Wenn du es manuell integrierst hast, versuche mal jQuery 1.11.x statt jQuery 2.x zu verwenden.

Das hide Event von jQuery wird von mootools anders interpretiert / überschrieben und verpasst dem Select / Dropdown ein display: none.

Ich hab contao-bootstrap per Composer installiert und zusätzilch noch twbs geladen, da diese mittlerweile ja unabhängig voneinander sind und nicht mehr automatisch mitgeliefert wird, was ich gelesen hab.

Die MooTools Integration sieht auch nicht Original aus. Wie hast du MooTools integriert? Welche Contao Version verwendest du?

Mootools und jQuery wurden von mir seperat per Theme+ integriert, damit ich die Reihenfolge besser beeinflussen konnte. Anfangs wurde die Contao-Integration verwendet.

Contao Version 3.5.12

[Spooky]

Bootstrap erzeugt tatsächlich ein "hide" Event auf dem <li>, wenn das Submenü wieder geschlossen wird. Darauf reagiert MooTools leider und führt die eigene "hide" Funktion aus (also so wie bei jQuery .hide()) - dadurch verschwindet das <li>.

Bootstrap und MooTools scheinen also insofern tatsächlich nicht miteinander kompatibel zu sein. Eine Idee wie man das lösen könnte habe ich leider auch nicht.

[Sabaid]

Die "Kollision" beschränkt sich ja nicht nur aufs Select / Dropdown sondern auch auf andere Bootstrap- und jQuery-Elemente. Ich bin ja nicht der erste mit dem Problem, es wurde in ein paar Beiträgen auf den noConflict-Mode hingewiesen, der anscheinend Wunder wirkt. Nur bin ich mir nicht ganz im klaren, wie ich diesen in meinem Fall anwenden / integrieren muss.

[Spooky]

Ich glaube nicht, dass der noConflict Mode hier wirkt, denn das Event wird ja trotzdem auf das DOM Element gesendet und MooTools fängt dieses Event ab.

[Sabaid]

Aber dann müsste doch die Reihenfolge was ausmachen? Momentan unterdrückt mootools ja die jQuery Ausführung ... könnte man das nicht auch umdrehen?

[Spooky]

Momentan unterdrückt mootools ja die jQuery Ausführung ...

In wie fern tut es das?

[Sabaid]

In wie fern tut es das?

Ok, ich muss revidieren. ^^
Es werden beide Ausführungen des Events durchgeführt, die von jQuery kriegt man nur nicht mit ...

[Spooky]

Hier gibt es Lösungen bzw. Lösungsansätze für zumindest 2 deiner Probleme:

• https://github.com/twbs/bootstrap/is...mment-11832079
• https://github.com/joomla/joomla-cms...omment-9325738

[Sabaid]

Hier gibt es Lösungen bzw. Lösungsansätze für zumindest 2 deiner Probleme:

• https://github.com/twbs/bootstrap/is...mment-11832079
• https://github.com/joomla/joomla-cms...omment-9325738

Vielen Dank. Auf diese zwei Workarounds bin ich bereits während meiner Recherche gestoßen, dachte aber es gäbe eine schönere / elegantere Lösung, die das gesamte Problem löst, statt ansatzweise.

[Spooky]

Hm, scheint es nicht zu geben, zumal die Entwickler von bootstrap die Schuld MooTools in die Schuhe schieben.

[Sabaid]

Hm, scheint es nicht zu geben, zumal die Entwickler von bootstrap die Schuld MooTools in die Schuhe schieben.

Leider. Nja, die Fixes scheinen nach ein paar Anpassungen super zu funktionieren. Vielen Dank nochmals für die Hilfe!

An einer Übereinkunft zwischen Bootstrap und MooTools wird bereits fleißig gearbeitet:

http://mootools.net/forge/p/bootstrap

http://anutron.github.io/mootools-bootstrap/

[Sabaid]

Für Leute, die ein ähnliches Problem haben und über das Topic stolpern. Folgender Code konnte alle genannten Konflikte lösen:

(function($)
{
    $(document).ready(function(){
        var bootstrapLoaded = (typeof $().carousel == 'function');
        var mootoolsLoaded = (typeof MooTools != 'undefined');
        if (bootstrapLoaded && mootoolsLoaded) {
            Element.implement({
                hide: function () {
                    return this;
                },
                show: function (v) {
                    return this;
                },
                slide: function (v) {
                    return this;
                }
            });
        }
    });
})(jQuery);

Quelle: http://phproberto.com/en/37-fix-moot...omla-templates