Reihenfolge: jQuery / mootools

[Sabaid]

Hallo zusammen,
ich versuche grade einige jQuery Plugins und contao-bootstrap per Theme+ in mein Theme einzubinden und möchte dabei den noConflict-Mode verwenden damit diese trotz mootools weiterhin funktionieren. Mootools ist leider für Isotope Ecommerce unerlässlich. Bzgl. der Reihenfolge und dem Include (head / body) bin ich mir nicht sicher, hab schon einige Kombinationen ausprobiert, jedoch scheint eine von beiden Bibliotheken nie zu funktionieren. Einige Beiträge meinten mootools zuerst, andere wiederum jQuery zuerst. Vorschläge? :/

[Spooky]

Ich würde lieber analysieren, warum es mit Bootstrap hier zu Fehlern kommt.

[Sabaid]

Ich würde lieber analysieren, warum es mit Bootstrap hier zu Fehlern kommt.

Habe ich bereits. Das Problem mit dem styled Select und den sich verschwindenden Dropdowns ist bereits bekannt. Mootools reagiert auf das Hide-Event der Selects / Dropdowns und verpasst ihnen ein "display: none". Als Lösung wurde an einigen Stellen der noConflict-Mode vorgeschlagen. Beim Carousel bin ich mir nicht ganz sicher. Momentan hab ich 1 Trennelement, sprich 2 Slides. Beim Wechsel der Slides wird die Höhe des zweiten auf 0 reduziert und beim nächsten Wechsel zum ersten Slide wieder normal gestellt.

[Spooky]

Das ist nicht "warum es mit Bootstrap hier zu Fehlern kommt" - das was du geschrieben hast ist nur die Beobachtung der Fehler . Hast du einen Link zur Seite, wo man das machen kann?

[Sabaid]

Die Seite ist momentan lokal. Woran denkst du könnt es denn liegen?

[Spooky]

Falsches Wrapping von MooTools oder jQuery Code.

[Sabaid]

Wie kann ich das dann prüfen bzw. beheben?

Wenn ich mootools deaktivier, funktioniert abgesehen von den Isotope Funktionalitäten alles (Bootstrap + Plugins).

[Spooky]

Stelle die Website online zur Verfügung, dann kann man sich endlich mal ein Bild davon machen.

[Andreas]

In Contao brauchst du eigentlich keinen noConflict-mode. Du kannst beide Bibliotheken einbinden und alles sollte laufen. Das liegt daran, wie die Scripts in den j_- und moo_-Templates gewrappt sind.

[Sabaid]

Hier der Link zur aktuellen Seite (in Entwicklung):

http://www.anvil.at/ALGE-TIMING/inde...l?language=en&

Testfälle:
1. Dropdown 'Information' öffnen und schließen -> display: none
2. Produkt Option: von 'mit Drucker' zu 'ohne Drucker' wechseln, warum nicht "Please select" standardmässig drin ist, konnte mir bisher keiner erklären. Was mir aufgefallen ist sind die zusätzlichen selected-Attribute, hat aber nichts mit dem aktuellen Problem zu tun.
3. Auf der Startseite das Carousel, kurz warten bis zum Wechsel zur zweiten Slide, dann nochmal kurz warten bis zum Wechseln zur ersten Slide

Wenn Testfall 1 und 3 funktionieren, funktioniert 2 dafür nicht mehr. Ich hab vorübergehend styled Selects deaktiviert, da ich sonst die Funktion von Isotope nicht testen konnte. Die Navigation links ist auch auf jQuery basierend und funktioniert teilweise je nach Reihung mit mootools auch nicht immer.

[Spooky]

Dieser Teil ist auf jeden Fall schon mal falsch gewrapped:

<script type="text/javascript">

    // ml-menu init
    (function() {
        var menuEl = document.getElementById('ml-menu'),
            mlmenu = new MLMenu(menuEl, {
                breadcrumbsCtrl : true, // show breadcrumbs
                initialBreadcrumb : 'home', // initial breadcrumb text
                backCtrl : true, // show back button
                itemsDelayInterval : 0, // delay between each menu item sliding animation
                // onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
            });
        
        // mobile menu toggle
        var openMenuCtrl = document.querySelector('.action--open'),
            closeMenuCtrl = document.querySelector('.action--close');
        
        $('.action--open').bind('click', openMenu);
        $('.action--close').bind('click', closeMenu);
        
        function openMenu() {
            classie.add(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', openMenu);
            $('#nav-toggle').bind('click', closeMenu);
        }
        
        function closeMenu() {
            classie.remove(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', closeMenu);
            $('#nav-toggle').bind('click', openMenu);
        }
    })();
    
    $('#quick-toggle').click(function(){
        $(this).find('i').toggleClass('fa-plus').toggleClass('fa-minus');
    });

</script> 

Sollte eher so aussehen:

<script>

    // ml-menu init
    (function($) {
        var menuEl = document.getElementById('ml-menu'),
            mlmenu = new MLMenu(menuEl, {
                breadcrumbsCtrl : true, // show breadcrumbs
                initialBreadcrumb : 'home', // initial breadcrumb text
                backCtrl : true, // show back button
                itemsDelayInterval : 0, // delay between each menu item sliding animation
                // onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
            });
        
        // mobile menu toggle
        var openMenuCtrl = document.querySelector('.action--open'),
            closeMenuCtrl = document.querySelector('.action--close');
        
        $('.action--open').bind('click', openMenu);
        $('.action--close').bind('click', closeMenu);
        
        function openMenu() {
            classie.add(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', openMenu);
            $('#nav-toggle').bind('click', closeMenu);
        }
        
        function closeMenu() {
            classie.remove(menuEl, 'menu--open');
            // toggle Icon
            $('#nav-toggle').find('i').toggleClass('fa-navicon').toggleClass('fa-close');
            
            // toggle Event-Listener
            $('#nav-toggle').unbind('click', closeMenu);
            $('#nav-toggle').bind('click', openMenu);
        }
    
        $('#quick-toggle').click(function(){
            $(this).find('i').toggleClass('fa-plus').toggleClass('fa-minus');
        });
    })(jQuery);

</script> 

Woher genau kommt das?

Kann aber nicht sagen, ob das die Probleme verursacht.

[Sabaid]

Das ist die Initialisierung der Navigation + mobile Icon Wechsel. Ich hab beim Test mit dem noConflict-Mode genau diesen Wrapper um den Code gelegt, hatte aber nicht viel geholfen. Ich änder das mal schnell ab.

EDIT: Wrapper ergänzt

[Sabaid]

Mir gehen langsam die Ideen aus, woran es liegen könnte. Keiner sonst eine Idee? :/

[Spooky]

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.

[Spooky]

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

[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