jQuery in Joomla 4 einbinden

    Hallo zusammen,

    ich komm mit meiner Webseite ganz gut voran :) - macht Spaß. Das nächste Thema das ich angehen möchte ist »jQuery«. Soweit ich das jetzt gelesen habe, kann man in Joomla jQuery aktivieren und zwar wie folgt:


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


    Ferner habe ich im HEAD Bereich eine .js Datei eingebunden in der folgendes steht:


    Code
    $(function() {                                                                  
                                                                                
    alert('yep');                                                               
                                                                                
    jQuery(button).click(function() {                                           
        alert('foo');                                                           
    });                                                                         
});


    Das 'Yep' wird mir angezeigt aber beim Klicken auf meinen Button passiert nichts. Ich mache also irgendetwas falsch. Wie kann ich den sehen, ob ich jQuery zur Verfügung stehen habe? Danke schon im Voraus.

    Tobi

    Wenn du in die Javascript-Konsole des Browsers schaust, während du klickst, wir dir wahrscheinlich ein "button undefined" angezeigt.


    Zuerst würde ich nicht $ verwenden, ohne mich abgesichert zu haben, dass das wirklich ein "Alias" für jQuery ist.


    Man kann z.B. eine äußere Schleife legen, die das für alles innerhalb der Schleife gewährleistet. So findet man das auch häufig im Joomla-Core.

    Code
    (function($) {
 ....der Code, der dann auch ungestört $ verwenden kann.
})(jQuery);

    Mit deinem Beispiel plus Fehlerbehebung.

    Code
    (function($)
{
 $(document).ready(function()
 {
  $("button").on("click", function()
  {                                           
    alert('foo');                                                           
  });                                                                         
 });
})(jQuery);

    1) Das ist dein Hauptfehler: Separatoren müssen in Anführungszeichen. So spricht du alle <button>-Tags an.

    2) Deine Kurzform des ".click(...)" ist (noch) nicht verboten, aber mittlerweile "deprecated" und wird bei späteren Jquery-Versionen angemahnt und irgendwann gehts gar nicht mehr. Deshalb habe ich die korrekte Form geschrieben.

    3) Es gibt so verwirrlich viele Varianten, des document ready, dass ich die obige bevorzuge. Sie liest sich einfach eindeutig.


    Wenn du ausschließlich eine document-ready-"Kapsel" haben willst/musst, geht auch diese Variante:

    Code
    jQuery(document).ready(function($)
{
  var button = $('button');

  $(button).on('click', function()
  {                                           
    alert('foo');                                                           
  });
});

    Auch so ist immer gewährleistet, dass "$" ein Alias für "jQuery" innerhalb der Schleife ist.

    Und hier habe ich das blanke button aus Spaß vorher definiert/belegt und kann deshalb die Anführungszeichen im click später weglassen.

    Grüß Dich,


    danke für die ausführliche Erklärung. Ich hatte gestern wohl nicht mehr die Konsole offen, und hab den »not defined« Fehler nicht mehr wahrgenommen. Klar, in meiner Version muss das in Quotes stehen, ansonsten ist es ja eine Variable. Ich stimme Dir zu bezüglich den unzähligen Varianten die es gibt. Ich habe Deine Variante gerade mal geprüft und - war natürlich klar - funktioniert es nun wie ich das wollte :)

    Danke Dir. Ich nehme Deine erste Variante da ich dann hier alle Funktionen definieren kann und gut ist. Kurze Frage. Gibts bei Javascript auch sowas wie Polymorphismus?


    Ein Beispiel: Ich möchte prüfen ob ein »on("click")« auf irgendein Element stattfindet, egal ob auf ein <div> Element, <p> Element, <span> Element, ...

    Das könnte ich ja jetzt mit 3 Funktionen bewerkstelligen, die aber letztlich alle gleiche machen.




    Und dann stellt sich mir die Frage, ob es auch möglich ist, dass wenn bspw. das <p> Element in einem <div> Element ist (das ja sehr oft der Fall ist), ob dann nur die "p" Funktion ausgeführt wird.

    Grüße Tobi

    Zitat von astrid

    Es könnte sein, dass du in Joomla 4 jQuery nicht mehr so einfach einbinden kannst

    Das stimmt so nicht. Es ist dabei und man kann es einbinden, overriden (sowieso empfohlen, da Joomla mit Versionen ja immer hinterherhinkt) whatever, wie gewohnt.

    Derzeitig beigepacktes Bootstrap-JS 4 braucht es sowieso noch. BS5-JS dann nicht mehr.


    Man kann überlegen, ob man die JQuery-Slim nimmt. Da fehlen dann die AJAX-Geschichten, was man aber auch mit Joomlas core.js hinbekommt. Sowie Animationen, fade und so Kram. Die Venobox kommt leider ohne Full-JQuery nicht aus z.B.


    Der dämliche WebAssetManger könnte einem vielleicht hie und da ins Handwerk pfuschen. Habe ich aber erst mal aufgegeben, da weiter zu forschen, ob, wann und wie.


    Das Migrate kann man selbst einbinden. Braucht man ja aber nicht unbedingt, wenn man seinen Code prüft und korrigiert.

    Tja und dann natürlich Erweiterungen, die JQuery weiter verwenden werden. Da ist dann wieder Migrate empfohlen, wenn die Entwickler nicht nachziehen.


    Und, ob einen der Link youmightnotneedjquery weiterbringt, hängt von den JavaSkript-Skills des Lesers ab. So einfach ist das nämlich alles nicht in komplexeren Geschichten...


    Ich schreib halt meine JQuery-Codes nach und nach um, weil JQuery sich ja mit Vanilla-JS nicht beißt. Kann man also schrittweise mischen bis man dann irgendwann für alles eine Vanilla-Lösung gefunden hat.

    Hallo zusammen,


    ich bin nicht so fit mit den ganzen Java-Skript Frameworks aber ich nehme mal an das Vanilla JS auch ein Framework für Javaskript ist oder?
    Wie wäre den der obere Code mit Vanilla JS wenn ich nicht auf jQuery gehen möchte? Wie setzt man AJAX Sachen dann mit Vanilla JS um oder fehlt das nur bei der Slim-Version von JQuery?

    Ihr seht schon, ich bin da nicht wirklich belesen. Über c++ könnt Ihr mich fragen :)