Javascript/jQuery Fehler

    Ich habe o.g. Problem, was mir so erst gar nicht aufgefallen ist, weil der eingesetzte ScreenReader anfangs problemlos lief. Ich denke das das Problem durch Updates - und meine Unwissenheit bezüglich JS/jQUery entstanden ist.
    Es geht um diese Seite: http://www.andreaswerk.de/de/
    Vorab: mit einer frischen Joomla 3.6.2 und den Standard-Templates funktioniert der ScreenReader wie gewollt, also liegt der Hund in meinem Template begraben.
    Aber nun zur Fehlerbeschreibung.
    Auf der Startseite erhalte ich in der FireBug Konsole unter JS folgende Meldung:

    Zitat

    getAttributeNode() sollte nicht mehr verwendet werden. Verwenden Sie stattdessen getAttribute()


    Ich weiß, dass es unter CSS noch eine Reihe Hinweise gibt, aber die muss ich sukzessive abarbeiten. Jetzt möchte ich erstmal den ScreenReader wieder ans laufen bringen.


    Für den o.g. Fehler hab ich schon eine Lösung gefunden (hab die Webseite lokal nachgestellt, da ich ungern live arbeite, wenn ich nicht genau weiß wo der Fehler liegt), indem ich die jquery-migrate.js eingefügt und schließlich die neueste jQuery-Version eingebunden habe - wie in der Anleitung beschrieben.


    Über den "Play"-Button sollte nun der Text des Contents vorgelesen werden, aber stattdessen erscheint ein:

    Zitat

    Leerer String an getElementById() übergeben.

    , so auch auf den anderen Seiten auf denen der ScreenReader eingebunden ist.
    Hinzu kommt ein weiterer Fehler:

    Zitat

    TypeError: $(...).tooltip is not a function

    .
    Die Tooltip-Funktion kommt aus dem Head-Bereich, also aus dem J!-Core.


    Ich finde ums Verrecken den Fehler nicht. Es wäre sensationell, wenn mich jemand wieder in die Spur bringt ... 8|?(:thumbup:

  • Zum hilfreichsten Beitrag springen

    Der Hinweis tritt bei mir im Firefox auch auf und entsteht durch mootools, stört aber nicht weiter.


    Den Tooltip kannst du im PHP deines Templates mit JHTML::_('behavior.tooltip'); einbinden, da fehlt entweder die Einbindung des Scripts oder aber der Tooltip wird konfliktiv gestartet, was hoffentlich nicht der Fall ist.


    Achte darauf, dass jQuery nur einmal eingebunden wird. Manchmal hilft es zusätzlich dafür zu sorgen, dass jQuery vor allen anderen Scripts geladen wird, wenn andere Scripts - Stichwort Dritterweiterungen - schlecht programmiert wurden.

    wie @addi schon sagt sind die mootools die Ursache
    da du bootstrap verwarntest Solde Mann die mootools nicht verwarnten denn die mootools und jQuery/bootstrap zusammen machen nur Probleme.
    des wegen muss ich @addi widersprechen die mootools tooltip einzubinden.


    es reicht wenn in dein Template das bootstrap framework einbindest.

    Code
    JHtml::_('bootstrap.framework', false, $this->direction);JHtml::_('bootstrap.loadCss', false, $this->direction);


    um Konflikte zu vermeiden musst du immer jQuery anstelle von $ verwandten sonst fusionieren sie nicht.

    Code
    jQuery(...)...

    Vielen Dank für die Antworten, aber leider ohne Erfolg ...


    Ich habe gerade alle Style-Angaben und JS-Einträge aus der index.php meines templates entfernt. Die tooltip-Meldung bleibt trotzdem. :/
    Overrides werde ich jetzt mal durcharbeiten und ggfls. aktualisieren. Ich kann mir zwar nicht vorstellen, dass dort JS oder CSS verwurstelt ist, aber ich habe sonst keinen Ansatzpunkt mehr.
    Wenn noch jemand nen TIpp hat: bitte gerne! hmmsearch

    • Hilfreich

    Du kannst aus der index.php entfernen, was du willst, irgendeine Komponente oder Modul oder Plugin wird es dir wieder einschleppen.


    Irgendwo im Codeablauf gibt es einen Aufruf

    Code
    JHtml::_('bootstrap.tooltip');


    (nicht behavior.tooltip).


    Dein Problem ist, wie @Robox und @addi schon sagten, dass irgendeine Erweiterung, vielleicht aber auch Du im Template JQuery doppelt lädt. Zu einem Zeitpunkt, wo man das nicht mehr darf, weil bootstrap.js "gekillt" wird. In Folge dann der tooltip-Fehler.


    Diese Zeile gehört raus:

    Code
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


    Wenn du nicht findest, wer oder was die einsetzt, verwende Plugin JQuery-Easy mit diesen Einstellungen:
    jQuery global verwalten


    Dass das Problem auf der Startseite nicht auftritt, ist purer Zufall, da hier bootstrap.js sehr spät geladen wird.


    Binde niemals Bootsrap oder JQuery oder migrate oder noconflict selber ein. Lass das Joomla machen.


    Verwende zur Sicherheit im Template ganz zu Beginn die Zeile

    Code
    JHtml::_('bootstrap.framework');


    Die lädt auch Jquery mit (falls es nicht sowieso schon geladen sein sollte). Und die Version von Joomla ist im Normalfall aktuell genug.
    Falls doch nicht, gib noch mal Bescheid. Auch dafür gibt es einen sauberen Override-Weg statt händisch reinbauen (Frevel! ;) ).


    Bootstrap-CSS musst du nicht extra laden, da dein Template das sowieso mitbringt und korrekt lädt.

    So, der Frevel hatte jetzt auch mal Zeit sich intensiver damit zu beschäftigen. ;)
    Ich habe nun auch meine index.php vom template "aufgeräumt". jQuery und bootstrap kommen jetzt von joomla und die Startseite wird auch ohne Fehler (weder JS noch Darstellung) geladen. Es gibt aber noch Anpassungen, die in meiner "bootstrap-responsive.min.css" und "bottstrap.min.css" des templates stehen. Wo packe ich denn die bootstrap-Overrides rein?


    Und: Danke Re:Later!