MetaModels Workshop in Berlin
Ergebnis 1 bis 28 von 28

Thema: Reihenfolge: jQuery / mootools

  1. #1
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard Reihenfolge: jQuery / mootools

    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? :/

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

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

  3. #3
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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.

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    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?

  5. #5
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

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

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    Falsches Wrapping von MooTools oder jQuery Code.

  7. #7
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

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

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

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

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

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  10. #10
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    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.

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    Dieser Teil ist auf jeden Fall schon mal falsch gewrapped:
    PHP-Code:
    <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:
    PHP-Code:
    <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.

  12. #12
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    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

  13. #13
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

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

  14. #14
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    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.

  15. #15
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

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

  16. #16
    Contao-Fan
    Registriert seit
    16.11.2012.
    Ort
    Freiburg
    Beiträge
    487

    Standard

    er verwendet die Version 3.5.12

  17. #17
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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.

    Zitat Zitat von Spooky Beitrag anzeigen
    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

  18. #18
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    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.

  19. #19
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    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.

  20. #20
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    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.

  21. #21
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    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?

  22. #22
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Sabaid Beitrag anzeigen
    Momentan unterdrückt mootools ja die jQuery Ausführung ...
    In wie fern tut es das?

  23. #23
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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 ...

  24. #24
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

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

  25. #25
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Hier gibt es Lösungen bzw. Lösungsansätze für zumindest 2 deiner Probleme:
    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.
    Geändert von Sabaid (24.05.2016 um 13:00 Uhr)

  26. #26
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    20.570
    User beschenken
    Wunschliste

    Standard

    Hm, scheint es nicht zu geben, zumal die Entwickler von bootstrap die Schuld MooTools in die Schuhe schieben.
    Geändert von Spooky (24.05.2016 um 13:38 Uhr)

  27. #27
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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/

  28. #28
    Contao-Nutzer
    Registriert seit
    24.02.2016.
    Beiträge
    177

    Standard

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

    Code:
    (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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •