Da alle Fallstricke inzwischen behoben sind, hier kurz die Umsetzung.
Die Aufgabe war, einem Datensatz eines Users ein passendes Bild zuzuordnen. Mit Klick auf ein Bild sollen diese vergrößert und wieder verkleinert werden. Ein zusätzlicher Button neben jedem Bild sorgt für die Auswahl und Übernahme des Dateinamen in ein verstecktes Feld 'imgSelected'. Die Bilder können ein bereits (von anderen Usern) hochgeladenes Bild, oder ein selbst hochzuladendes Bild sein. Um die Bildauswahl zu erleichtern, werden mehrere Listboxen als Filter genutzt. Im konkreten Fall sind es Orte, Zeiten und Gruppen, es könnten aber auch beliebige andere Bedingungen sein. Als "Bildergalerie" dient eine ListboxSQL 'tableField' mit der Option 'als Datenliste anzeigen' und 'Feld verstecken, wenn Liste leer ist' und 'Reload erlauben', die mit Hilfe der Filterfelder (Reloadfelder) die passenden Bilder dynamisch aus der Datenbank holt. Das SQL-Statement liefert aus den Uploadfeldern gleich den "fertigen" kompletten Dateipfad. Das erledigt ein
Code:
SELECT
CONCAT(JSON_UNQUOTE(JSON_EXTRACT(`uploadField`, '$.folder')), '/', JSON_UNQUOTE(JSON_EXTRACT(`uploadField`, '$.file'))) as value,
CONCAT(JSON_UNQUOTE(JSON_EXTRACT(`uploadField`, '$.folder')), '/', JSON_UNQUOTE(JSON_EXTRACT(`uploadField`, '$.file'))) as label
FROM
`table`
WHERE
...
;
in den Frontend Webassets sorgt dann JavaScript für die Anzeige der Bilder und der Auswahlbutton und steuert, was passieren soll:
Code:
// Galerie-Tabellenansicht als Bildergalerie mit Auswahlmöglichkeit anzeigen
// + Vergrößern/Verkleinern mit Klick auf das Bild
// + Auswahl-Button neben jedem Bild (mit Übernahme der Bilddatei in ein "Speicherfeld" imgSelected
// + Mouseover beim Button zeigt den Dateipfad an
$('#' + tableField).on('change', function() { // bei Änderung der Tabelle durch Reloadfelder ausführen
$(this).find('td').each(function() { // alle Tabellenzeilen abarbeiten
var imgPath = $(this).text();
var fileName = imgPath.split('/').pop().split('.').slice(0, -1).join('.');
var imgButton = '<button title="' + fileName + '">dieses Bild auswählen</button>';
// Ersetzen des Bildpfades durch das Bild und dieses klickbar machen
$(this).html('<img src="' + imgPath + '" alt="' + fileName + '" title="klicken zum Vergrößern/Verkleinern" style="width: 390px; cursor: pointer;" />' + imgButton);
// Event-Handler für Klick auf das Bild
$(this).find('img').on('click', function() {
var currentWidth = $(this).css('width');
if (currentWidth === '390px') { // Standardgröße
$(this).css('width', 'auto'); // Bild vergrößern
} else {
$(this).css('width', '390px'); // Bild verkleinern
}
});
// Event-Handler für Klick auf den Button
$(this).find('button').on('click', function() {
// gewähltes Bild Übernehmen (z.Bsp. fileName in verstecktem Feld speichern
if ($('#' + imgSelected).val(fileName) !== $('#' + imgSelected).val()) {
$('#' + imgSelected).val(fileName).change();
// console.log('ausgewählt wurde:', fileName); // Kontrollausgabe
}
});
});
});
Das ist zwar nur ein stark vereinfachtes Beispiel, vielleicht hilft es aber trotzdem weiter.
I recommend you the new and up-to-date documentation for Joomla 4: