Jquery Autocomplete in eigenes Modul einbauen

  • Hallo,


    ich steh grad irgendwie auf dem Schlauch und bräuchte mal einen Schubs in die richtige Richtung.


    Hier wird ein kleines Modul im Beitrag aufgerufen. Das Modul holt sich die Daten aus der Datenbank und gibt sie in entsprechender Form aus. Ganz simple. Das Suchfeld soll ein Jquery Autocomplete Input-Feld sein. Wie die ganze Sache funktioniert weiss ich und hab ich schon oft für "normale" Webseiten genutzt.


    Doch wie bau ich das ganze in mein Modul ein? Wo und wie muss ich Jquery UI einbinden? An welche Stelle im Modul muss mein JS-Code?

  • Ein selbst geschriebenes Modul, meint, hast du die Möglichkeit bei Installation einen /media/mod_xyz/ - Ordner anlegen zu lassen?


    Oder "nur" ein Layout-Override eines Moduls?


    Stört es, wenn die UI-Bibliotheken im Template-Ordner liegt, meint, ist das eine Individuallösung für diese spezifische Webseite oder soll das Modul auch für andere verwendbar sein?

  • Ja ein selbst geschriebenes Modul. Die Möglichkeit solch einen Ordner zu erstellen besteht.

    Es ist eine Individuallösung für diese Seite. Das Modul wird so in der Form sonst nirgends genutzt.

  • Das Modul mod_xyz legt folgende Ordner bei Installation an:

    media/mod_xyz/css/

    media/mod_xyz/js/

    In diese kommen CSS-Dateien und JS-Dateien.

    Beispiel:

    media/mod_xyz/css/dingsbums.css

    media/mod_xyz/js/dingsbums.js


    Die Laderoutine für die Dateien sieht dann so aus:

    - Unter die Zeile defined('JPATH_PLATFORM') or die; (oder ähnliche, die es ja in jeder Joomla-PHP geben muss) schreibst:


    use Joomla\CMS\HTML\HTMLHelper;


    - In welcher Datei du lädst bleibt dir überlassen. mod_xyz.php, default.php, helper.php. Die use-Zeilen gehören dann exakt in die Datei, wo folgendes passiert.


    - In deinem Code schreibst dann:

    Wenn dein eigenes JS statisch bleibt, leg es ebenfalls in eine Datei im Ordner media/mod_xyz/js/ und lade es wie oben (in der richtigen Reihenfolge).


    Wenn du was als JS-Code oder CSS-Code im HEAD einfügen musst, da z.B. Modulparameter dynamisch eingebaut werden müssen, fügst oben zur use Zeile eine weitere ein oder, wenn das in einer anderen Datei passiert halt dort:

    use Joomla\CMS\Factory;

    Code
    $js = 'alert(hallo)';
    $css = '.container{cursor:none;}';
    
    $document = Factory::getDocument();
    $document->addScriptDeclaration($js);
    $document->addStyleDeclaration($css);