Problem mit Jquery

JulianW · 11. Oktober 2018

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

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

Direkt im Anfangs php Teil

Jetzt habe ich ein einfaches JQuery Script geschrieben

Code

$(document).ready(function(e)
{
    //Alles Ready
    alert('Geladen');

    $(window).resize(function(e)
    {
          //Fenster wurde verändert
          alert("Resize");
    });
});

Alles anzeigen

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

Gruß

Julian

Elfangor93 · 11. Oktober 2018

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

Code

jQuery(document).ready(function() {
...
});

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

jQuery(document).ready(function() {
  setTimeout(function() {
     // dein Code
  }, 1000);
});

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...

Re:Later · 11. Oktober 2018

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.

Code

;(function($)
{

 //document ready läuft VOR load 
 $(document).ready(function()
 {        
  // Tu dies
 });

 //load ist NACH document ready
 $(window).load(function()
 {
    // tu späteres
 });


})(jQuery);

Alles anzeigen

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

JHtml::_('jquery.framework');

// findet seinen Pfad allein im Templateordner
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.

JulianW · 11. Oktober 2018

Danke das mit dem Load funktioniert!

Jetzt habe ich das nächste Problem

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

Code

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

Allerdings beeinflusst mein JS File wohl meine Style nicht

Code

nav
{
    display: none;
}

funktioniert allerdings sofort

Wie kann ich das in Joomla umsetzten?

Viele Grüße

Julian

Re:Later · 11. Oktober 2018

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

JulianW · 11. Oktober 2018

Zitat von Re:Later

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

Der komplette momentane Code ist:

Code

;(function($)
{
 //document ready läuft VOR load
 $(document).ready(function()
 {
    ;
 });
 //load ist NACH document ready
 $(window).load(function()
 {

    function UDResponsiv()
    {
       if(($(window).width()) < 715)
       {
            alert("Zu Klein");
            $('nav ul').css('display','none');
       }
       else
       {

           $('nav ul').css('display','inline');
       }
    }
    UDResponsiv();
    $(window).resize(function()
    {
        UDResponsiv()



    });
 });
})(jQuery);

Alles anzeigen

Tags