Problem mit Jquery

  • Hallo Leute,


    ich habe das Problem, dass mein JS Code einfach nicht funktionieren will.
    Ich habe JQuery und mein JS- File wie Folgt in meine template index.php eingebunden


    Code
    1. $pfad = $this->baseurl .'/templates/' . $this->template . '/js/menu.js';
    2. $document = JFactory::getDocument();
    3. $document->addScript("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js");
    4. $doc->addScriptDeclaration('jQuery.noConflict();');
    5. $document->addScript($pfad);

    Direkt im Anfangs php Teil


    Jetzt habe ich ein einfaches JQuery Script geschrieben

    Die Geladen Message wird beim Reload angezeigt. Allerdings die resize Message wird beim verändern des Fensters nicht angezeigt.

    Es funktionierte vor einiger Zeit aber schon mal so. Meiner Meinung nach habe ich am Code nichts verändert und es wirkt fast schon zufällig.

    Ich hatte es sogar schon soweit, dass er mir jedes Mal die aktuelle Fenster breite angezeigt hat. Und dann ging es auf einmal nicht mehr.


    Joomla 3.8.12

    Lokaler Server zum testen


    Ich bin verzweifelt und ich hoffe ihr habt eine Idee. Eventuell verwende ich JS oder Jquery für Joomla ja einfach falsch search


    Gruß

    Julian

  • Grundsätzlich verwende ich unter Joomla statt dem $ direkt jQuery. d.h:

    Code
    1. jQuery(document).ready(function() {
    2. ...
    3. });

    Ich habe auch schon festgestellt, dass die ready-function unter Joomla nicht "korrekt" funktioniert. Der Code innerhalb von "jQuery(document).ready(function) {" wird ausgeführt, obwohl das DOM nich nicht bereit ist. Als Quick&Dirty-Abhilfe half mir ein zusätzlicher Timer innerhalb der ready-function:

    Code
    1. jQuery(document).ready(function() {
    2. setTimeout(function() {
    3. // dein Code
    4. }, 1000);
    5. });

    Diese Lösung ist alles andere als schön, jedoch war es die einzige Möglichkeit, den Code zum laufen zu bringen.

    Wenn jemand eine Antwort hat, warum die jQuery ready-function in Joomla nicht korrekt funktioniert, wäre ich sehr interessiert...

  • Sie funktioniert unter Joomla vollkommen korrekt. Was immer sein kann, ist, dass z.B. mehrere Codes die nach document-ready geladen werden in falscher, sich störender Reihenfolge ablaufen. Hier kann man dann versuchen jquerys load() zu verwenden.


    Weiters lädt man JQuery am besten aus dem Joomla-Core, da es Konflikte größeren Ausmaßes geben kann, wenn unterschiedliche Versionen GLEICHZEITIG geladen werden, was in Joomla 3 mit höchster Wahrscheinlichkeit passieren wird:


    Dein Code verkürzt sich dann auf:

    Code
    1. JHtml::_('jquery.framework');
    2. // findet seinen Pfad allein im Templateordner
    3. JHtml::_('script', 'menu.js', array('relative' => true));

    Und, wenn nun wirklich und ganz unbedingt eine andere JQuery-Version geladen werden muss als die die Joomla dabei hat, packst du die höher-versionige jquery.min.js in Ordner


    /templates/DEINTEMPLATE/js/jui/


    weil dann wird Joomla wannimmer eine Erweiterung zum Laden von JQuery auffordert diese jquery.min geladen und viel wichtiger, Joomla lädt JQuery nur 1x.

  • Danke das mit dem Load funktioniert!


    Jetzt habe ich das nächste Problem:saint:


    Ich möchte meine Navigation über JS ausblenden, momentan verwende ich dafür:

    Code
    1.  $('nav').css('display','none');

    Allerdings beeinflusst mein JS File wohl meine Style nicht

    Code
    1. nav
    2. {
    3. display: none;
    4. }

    funktioniert allerdings sofort


    Wie kann ich das in Joomla umsetzten?


    Viele Grüße

    Julian

  • Hast denn die Zeile innerhalb eines document ready? Entweder, so wie ich zeige, damit du $ verwenden kannst oder so wie 19leunam93 sagt eben alles mit JQuery statt $ . Aber jedenfalls innerhalb eines document ready.

    Der komplette momentane Code ist: