Beiträge von Sempervivum

Häufige Aufgabe und häufiges Problem:

Da Du die Zeilen in einer Schleife erzeugst, tritt die selbe ID mehrfach auf. Gefunden wird dann, wie Du richtig beobachtest, immer die erste, egal welche Zeile Du klickst.

Lösung: In deinem Eventhandler findest Du unter this die Zeile, in die geklickt wurde. Davon ausgehend kannst Du mit "find" die Checkbox ermitteln und den Wert heraus holen:

 $('.row').click(function(event){
    event.preventDefault();
    const tourid = $(this).find('.ud_radio').val();
    $.ajax({

(ungetestet)

Dazu musst Du natürlich statt einer ID "ud_radio" eine Klasse verwenden.

Auch in diesem Fall nur eine Tarnung um seine Links unter zu bringen.

Das ist relativ einfach zu machen und Du brauchst weder eine Javascript-Bibliothek noch GD oder Imagick. Letztere hätten sogar Nachteile weil Du damit ein Rasterbild erzeugen würdest, was sich nicht so gut skalieren und responsiv machen lässt.

Die Parameter, die der Benutzer eingibt, kannst Du in einer JSON-Datei auf dem Server speichern.

Dann die Texte mit CSS über dem Bild positionieren, entweder mit absoluter Positionierung oder über Gridlayout, indem Du beides in die selbe Zelle legst.

Edit: Ich hatte das zunächst so verstanden, dass der Betreiber der Website das machen soll. Oder soll jeder Besucher es machen? Dann müsste eine Benutzerverwaltung her, es sei denn, die Parameter müssen nicht dauerhaft auf dem Server gespeichert werden.

Das sollte funktionieren, wenn Du den Funktionsaufruf im then-Zweig hinzu fügst:

fetch('/jsonupload', {
method: 'post',
body: params
}).then(() => {
document.getElementById('jsonupload').reset();
showHide([]);
alert('Eingabe wurde an die TAGS übertragen');
}).catch(reason => alert(reason));

Ich habe mir das jetzt angesehen. Du hast das mit inline-notierten Eventlistenern gemacht und das wird dann ein wenig lang. Daher habe ich es ein wenig kompakter angelegt mit einer Funktion, der man ein oder mehrere IDs übergibt und die dann die zugehörigen p-Elemente sichtbar und alle anderen unsichtbar macht:

        $(document).ready(function () {
            // hier drin alles wie bisher
        });

        // Elemente zeigen oder verbergen entspr. Parameter
        function showHide(elemIds) {
            // Alle p-Elemente bereitstellen, deren ID mit einem p beginnt
            const elemsShowHide = document.querySelectorAll('p[id^="p"]');
            // Über alle diese p-Elemente:
            elemsShowHide.forEach(item => {
                // Ist das aktuelle Element in der Liste im Parameter?
                if (elemIds.includes(item.id)) {
                    // Element zeigen
                    item.style.display = 'block';
                } else {
                    // Element verbergen
                    item.style.display = 'none';
                }
            });
        }
    </script>

Die Funktion muss außerhalb des document-ready liegen, damit sie später verfügbar ist.

Die Eventlistener musst Du dann anpassen und diese Funktion verwenden:

        <fieldset style="text-align: left; width:280px">
            <legend><big><span style="font-size:16px;"><span
                            style="font-family:tahoma,geneva,sans-serif;">Auswahl:</span></span></big></legend>
            <div>
                <!-- p#p1 zeigen, alle anderen verbergen wenn dieser Radiobutton gedrückt wird -->
                <input type="radio" id="liednummer1" name="verein" value="liednummer1"
                    onchange="showHide(['p1']);">
                <label for="liednummer1"><big><span style="font-size:16px;"><span
                                style="font-family:tahoma,geneva,sans-serif;">Eine
                                Titelnummer</span></span></big></label>
            </div>
            <div>
                <!-- p#p2 zeigen, alle anderen verbergen wenn dieser Radiobutton gedrückt wird -->
                <input type="radio" id="liednummer2" name="verein" value="liednummer2"
                    onchange="showHide(['p2']);">
                <label for="liednummer2"><big><span style="font-size:16px;"><span
                                style="font-family:tahoma,geneva,sans-serif;">Zwei
                                Titelnummern</span></span></big></label>
            </div>
            <div>
<!-- usw. in dem selben Stil für die folgenden Elemente -->

Soll gar kein p-Element angezeigt werden, musst Du ein leeres Array übergeben:

showHide([]);

Auf diese Weise können wir auch beim Reset alle Elemente verbergen:

        <p style="display:none;" id="p7">
            <input style="height: 40px; width: 308px; font-size:20px; color:#fafafa; background-color: #1c9407;"
                id="send-it" type="button" value="Übertragen"><br><br>
            <input style="height: 30px; width: 308px; font-size:20px; color:#fafafa; background-color: #cf0a35;"
                type="button" value="Reset" onClick="showHide([]);">
        </p>

Das Ganze habe ich nur oberflächlich getestet, einen genauen Test überlasse ich dir.

Das geht sicher auch, ich muss es mir aber erst ansehen, wie Du das dynamische Einblenden gemacht hast. Ich bin jetzt erst Mal einige Stunden außer Haus, mache das später.

Immer wieder gern. Funktioniert es denn jetzt auch im Fully Kiosk?

Glücklicherweise war es (noch) kein Problem mit dem Ajax sondern es lag daran, dass das Auslesen des selektierten Textes bei Select2 etwas anders funktioniert: value liefert nicht den kompletten Text sondern nur die Nummer aber glücklicher Weise haben wir noch unser Objekt mit der Nummer als Schlüssel und können daraus den Titelnamen leicht ermitteln. So wie ich das jetzt gemacht habe, wird das nicht bei manueller Eingabe funktionieren, aber lass es uns erst Mal so zum Laufen bringen.

Es gab dann noch kleinere Probleme mit den Scopes, deshalb habe ich jetzt alles Javascript im document-ready zusammen gefasst, siehe Anhang.

Den inline-Eventlistener kannst Du dann in dem Übertragen-Button löschen:

            <input style="height: 40px; width: 308px; font-size:20px; color:#fafafa; background-color: #1c9407;"
                id="send-it" type="button" value="Übertragen"><br><br>
            <input style="height: 30px; width: 308px; font-size:20px; color:#fafafa; background-color: #cf0a35;"
                type="button" value="Reset" onClick="location.href=location.href">

Ich will hoffen, dass wir da nicht wieder in eine Begrenzung von Fully Kiosk laufen wegen Ajax und fetch.

Ich sehe es mir jetzt an.

Für dich selber kannst Du problemlos ein Neuladen der Seite am Cache vorbei durch Strg+F5 erzwingen. Bei der Entwicklung reicht das normaler Weise aus.

Wenn Du auch für die Besucher sicher stellen willst, dass sie die neueste Version laden, kannst Du z. B. eine Versionsnummer an die URL hängen, so:

<link rel="stylesheet" href="css/select2.css?version=3">
<script src="js/select2.js?version=4"></script>

Und wenn Du dich in Javascript bewegst und z. B. fetch benutzt, geht das automatisch wenn Du einen Zeitstempel benutzt:

fetch('die-url.php?time=' + Date.now(), {
    // hier ggf. die Optionen
}).then

Gerade hier hat mich der Cache, ebenso wie bei dir, früher zur Verzweiflung gebracht, weil ich über Stunden Fehler im Skript gesucht habe und es lag nur am Cache.

Guten Morgen,

hier eine Demo, mit der ich das getestet habe:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test Select2 für Notenpult Anzeigesteuerung Musikkapelle ORT</title>
    <link rel="stylesheet" href="css/select2.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/select2.js"></script>
    <script>
        $(document).ready(function () {
            const
                liednamen = {
                    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                    //HIER DÜRFEN ÄNDERUNGEN GEMACHT WERDEN
                    '1': 'Sternenbanner',
                    '2': 'Weil ich dich gerne mag',
                    '3': 'Posaunenparade',
                    '10': 'Lieblingstück',
                    '11': 'Trompetenserenade',
                    '12': 'Hinter dem Wald',
                    '123': 'Walzerliebe',
                    '123': 'Wiener Marsch',
                    '312': 'Dixie Land Parade',
                    '402': 'Schritt für Schritt'
                    //BIS HIER DÜRFEN ÄNDERUNGEN GEMACHT WERDEN
                    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                };

            // Wir konvertieren zunächst das obige Objekt in ein Array
            // mit dem Format, das Select2 braucht
            let data = [];
            for (const [key, value] of Object.entries(liednamen)) {
                data.push({ id: key, text: key + ': ' + value });
            }

            // Jetzt können wir die einzelnen Selects initialisieren
            $('#test-select2-1').select2({
                data: data,
                width: '20em'
            });
            $('#test-select2-2').select2({
                data: data,
                width: '20em'
            });
            $('#test-select2-3').select2({
                data: data,
                width: '20em'
            });
        }); 
    </script>
</head>

<body>
    <select id="test-select2-1">
    </select>
    <select id="test-select2-2">
    </select>
    <select id="test-select2-3">
    </select>
</body>

</html>

Pfade musst Du wieder anpassen.

Wie Du siehst, habe ich das Format der Liste als Ausgangsbasis genommen, das wir bisher hatten. Wenn Du die vollständige Liste mit den 250 Titeln in einem anderen Format hast, brauchst Du sie nicht umzuändern, wir können das sicher automatisch machen.

PS: Es war ja die Rede davon, dass es um die 250 Titel sind. Hattest Du die eigentlich alle schon in das JS-Objekt aufgenommen?

Zitat

Nach meinen Recherchen gibt es anscheinend keine Möglichkeit mit den Select so zu arbeiten wie mit einer Datalist. Sollte ich damit richtig liegen, würde dies ja heißen ich müsste für alle vier betroffenen Eingabefelder ein Select einfügen und die Werte doppeln...

Ja, das trifft zu. Aber die gute Nachricht ist, dass man das automatisch durch das Skript machen kann.

Wir hatten ja zuletzt die Daten in einem Javascript-Objekt ab gelegt:

        const
            liednamen = {
                '1': 'Sternenbanner',
                '2': 'Weil ich dich gerne mag',
                '3': 'Posaunenparade',
                '10': 'Lieblingstück',
                '11': 'Trompetenserenade',
                '12': 'Hinter dem Wald',
                '123': 'Walzerliebe',
                '123': 'Wiener Marsch',
                '312': 'Dixie Land Parade',
                '402': 'Schritt für Schritt'
            }

Daraus kann man problemlos die einzelnen Selects erzeugen.

...

Als ich das so weit geschrieben hatte, fiel mir ein, dass Select2 das schon eingebaut hat, siehe hier:

The Select2 data format | Select2 - The jQuery replacement for select boxes

Gleich der erste Abschnitt.

Dann kann man mit Select2 doch mit einer gemeinsamen Datenquelle arbeiten, nur dass sie dann keine Datalist ist sondern das Javascript-Objekt.

Bin gerade unterwegs, antworte später.

Das ist ja super, dann haben wir dieses Problem auch gelöst. Versuche, das selber in die vollständige Seite zu integrieren und melde dich wenn es nicht klappt.

Ich wünsche ebenfalls ein schönes Wochenende!

Guten Morgen!

Hier ein neues ZIP, wenn alles funktioniert muss es so aussehen wie auf dem Screenshot.

select2.png

Ich habe jetzt ein ZIP mit den Testdateien gemacht. Du musst die Ordner css und js anlegen und die jeweiligen Dateien dort hinein verschieben. Teste es zunächst ohne Fully Kiosk und anschließend mit. Dann werden wir sehen, ob das Select2 funktioniert.

Zitat

Funktioniert auch? Warum?

Das HTML ist ja ein vollständiges Select (wenn man mal von den drei Punkten absieht) und das funktioniert auch ohne das Javascript. Nur, bei 250 Einträgen würde es sich über ca. 10 Seiten erstrecken und wäre schwer zu bedienen. Und jQuery kannst Du hier herunter laden:

Download jQuery | jQuery

Gleich das erste, compressed, production.

(Eigentlich wollte ich das in #75 posten aber habe die falsche URL erwischt.)

Ja, erst jQuery dann Select2. Und das CSS-File. Du kannst alles im Head unterbringen wenn Du

$(document).ready(function() {

verwendest wie in dem Beispiel.

Ein Beispiel finde ich z. B. hier:

Examples - Select2

Gleich das erste für "Single".

Und jQuery kannst Du hier herunter laden:

Examples - Select2

Auch gleich das erste, compressed.