Beiträge von Sempervivum

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.

Bei den beiden, Select2 und Selectize, jeweils zwei, einmal jQuery und dann das eigentliche Skript.

Zitat

Was ich maximal machen kann ist ein File zu hinterlegen was geladen wird.

Wenn Du nur ein File laden kannst, kannst Du versuchen, mit einem Editor beide zusammen zu fügen, erst jQuery und dann das Skript.

Dann bliebe noch die Möglichkeit, eines der anderen Skripts aus #57 zu versuchen. Am besten schnell eine einfache Testseite machen und sehen ob diese funktioniert.

Ja, wird eindeutig ohne Fehler geladen.

Zitat

Mmh, aber eigentlich bin ich ja komplett auf http: unterwegs Würde ich meinen.

Ich dachte mehr daran, dass Fully Kiosk die Seite möglicher Weise über https lädt.

Ich habe inzwischen eine wenig weiter gesucht und dies gefunden:

Da ist davon die Rede, dass ein aloz77 der Entwickler von Fully Kiosk ist. Möglicher Weise könntest Du den mal anschreiben. 

Zitat

Das mit http: und https: ist nur eine Vermutung meiner Seite, da es recht deutlich ist.

Die Vermutung ist durchaus berechtigt, es gibt da "mixed content", das ist ein Fehler, den man bekommt, wenn man in einer https-Seite eine über http einbindet. Allerdings würde dann die eingebundene Seite überhaupt nicht geladen werden, während in unserem Fall nur die Datalist nicht funktioniert.

Fully Kiosk Testing Datalist

Das liegt auf fully-kiosk.com, ist dann wahrscheinlich nicht von dir?

Hast Du mal in die Konsole gesehen?

Was funktioniert denn eigentlich genau nicht? Wegen der Angelegenheit, dass datalist nicht unterstützt wird, bin ich davon ausgegangen, dass beim Klick auf das Eingabefeld die Liste nicht auf klappt?

Dann wird es ein bisschen schwierig weil ich keinen Browser habe, der kein Datalist unterstützt. Sieh als erstes in der Console nach, ob irgend welche Fehlermeldungen kommen. Und dann im Network-Tab ob diese JS-Datei auch fehlerfrei geladen wird.

Dort steht:

Zitat

insert the JavaScript file ‘datalist-polyfill.min.js’ at the bottom of the webpage.

Also nicht in den head sondern ganz unten, vor dem schließenden </body>, denn sonst existieren die Elemente noch nicht.

Eine normale Dropdownliste wäre schon ein wenig heftig bei 250 Einträgen. Mit diesen Kiosk-Sachen habe ich mich noch nicht beschäftigt. Ich sehe zwei Möglichkeiten, da weiter zu kommen:

1. Du versuchst, jemand zu finden, der sich damit auskennt, am besten indem Du einen neuen Thread für dieses spezielle Problem auf machst.
2. Bevor es datalist gab wurden Bibliotheken entwickelt, um so etwas mit Javascript nachzubilden. Ich kenne da https://selectize.dev und https://select2.org. Beide brauchen jQuery aber damit kann man leben. Ich hatte sie vor längerer Zeit schon kennen gelernt und benutzt. Durch erneutes Googeln habe ich jedoch dieses gefunden: https://www.cssscript.com/html-datalist-polyfill-safari/ Das braucht kein jQuery und scheint kinderleicht einzusetzen zu sein. Damit sollten wir es versuchen.

Allerdings will mir irgend wie nicht in den Kopf, dass dieses Android WebView Datalists nicht unterstützt. Aber möglicher Weise einfacher, dieses Polyfill einzubauen als in dieser Sache weiter nachzuforschen.

Da offenbart sich mal wieder, dass das Web und Google schlechte Ratgeber sind wenn es um das Lernen von Webentwicklung geht. Sehr viel hat sich im Laufe der Zeit geändert aber das Web vergisst nicht und gefühlte 80-90% der Quellen sind veraltet.

Einen Kurs oder ein Buch kann ich nicht empfehlen aber die Doku von PHP. Sehr gut verständlich und mit vielen Beispielen.

Und dann bei konkreten Problemen im Forum nach fragen.

Das wäre super. Meistens ist es ja so, dass ein Projekt nie fertig wird.

Natürlich, Du brauchst den gleichen Code nur dort hin zu schreiben, wo die Antwort vom Server da ist:

            const invalidElems = document.querySelectorAll('form :invalid');
            if (invalidElems.length == 0 && isValid) {
                params = new FormData();
                params.append('json', JSON.stringify(json));
                params.append('mac', "0000021EDF033B15");
                // fetch('/jsonupload', {
                fetch('testpost.php', {
                    method: 'post',
                    body: params
                }).then(() => {
                    document.getElementById('jsonupload').reset();
                    alert('Eingabe wurde an die TAGS übertragen');
                }).catch(reason => alert(reason));
            } else {
                alert('Eingaben nicht korrekt');
            }

Das liest man immer gern!

Bleibt noch das Rücksetzen des Formulars, dieses lässt sich sehr leicht machen, nur das onclick so ändern:

            <input style="height: 30px; width: 100px; color:#fafafa; background-color: #cf0a35;" type="button"
                value="Reset" onClick="document.getElementById('jsonupload').reset();">

Bei den übrigen Feldern war das auch schon implementiert aber es war noch ein Fehler drin:

            } else if (verein === "liednummermanuell") {
                var nummermanuell = document.getElementById("nummermanuell").value;
                var titelmanuell = document.getElementById("titelmanuell").value;
                // In nummermanuell und titelmanuell steht schon das value drin,
                // d. h. wir dürfen das nicht noch Mal notieren
                // if (nummermanuell.value == '' || titelmanuell.value == '') isValid = false;
                if (nummermanuell == '' || titelmanuell == '') isValid = false;
                json = [
                    { "text": [148, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1, 1] },
                    { "text": [148, 26, nummermanuell, "fonts/calibrib80", 1, 1] },
                    { "text": [148, 97, titelmanuell, "t0_14b_tf", 1, 1] },
                    { "text": [250, 43, "evtl.", "t0_14b_tf", 2, 1] },

Bei den folgenden kannst Du es sicher selbst korrigieren.

Die Funktion liedHolen kann man noch ein wenig kürzen und verbessern:

        function liedHolen(sel) {
            inputLied = document.querySelector(sel);
            // Zunächst prüfen wir ob die Eingabe das richtige Format hat:
            // Am Anfang eine Nummer, dann ": " und danach beliebig viele Zeichen
            // als Name
            const matches = inputLied.value.match(/(\d+):( .+)/);
            if (matches) {
                // Das Format passt, wir geben das Objekt mit diesen Werten zurück, die Eingabe ist OK
                return { nr: matches[1], name: matches[2], invalid: false };
            }
            // Die Eingabe ist nicht OK, wir geben für Nummer und Name jeweils ''
            // zurück und setzen invalid auf true
            return { nr: '', name: '', invalid: true };
        }

Ja, da gab es noch einiges was nicht passte. Ich hatte mir noch nicht vollständig dein Formular angesehen und dachte, es gäbe immer zwei Liednamen und wenn nur ein Lied angezeigt wird, nimmt man input-liedname-1 aber das war ein Irrtum.

Zitat

Langsam werden es soviele verschachtelte Funktionen und viel zu viel Nice to have

Das hat man häufig, vor allem wenn es hunderte von Zeilen sind oder noch mehr. Deshalb habe ich versucht, das ganze wieder ein wenig zu straffen und die Prüfung, ob die Eingabe für das Lied OK ist, in die Funktion liedHolen hinein genommen. Die sieht dann so aus:

Zitat

        function liedHolen(sel) {
inputLied = document.querySelector(sel);
            // Zunächst prüfen wir ob die Eingabe das richtige Format hat:
            // Am Anfang eine Nummer, dann ": " und danach beliebig viele Zeichen
            // als Name
            if (inputLied.value.match(/\d+: .+/)) {
                // Das Format passt, wir zerlegen die Eingabe in Nummer und Name
                const splitted = inputLied.value.split(': ');
                // und geben das Objekt mit diesen Werte zurück, die Eingabe ist OK
                return { nr: splitted[0], name: splitted[1], invalid: false };
}
            // Die Eingabe ist nicht OK, wir geben für Nummer und Name jeweils ''
            // zurück uns setzen invalid auf true
            return { nr: '', name: '', invalid: true };
}

Alles anzeigen

Die Auswertung wird dann wesentlich einfacher und sieht für ein Lied so aus:

            if (verein === "liednummer1") {
                var lied = liedHolen('#input-liedname');
                if (lied.invalid) isValid = false;
                json = [
                    { "text": [148, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1, 1] },
                    { "text": [148, 26, lied.nr, "fonts/calibrib80", 1, 1] },
                    { "text": [148, 97, lied.name, "t0_14b_tf", 1, 1] },
                    { "text": [148, 106, "ORT", "fonts/bahnschrift20", 1, 1] }
                ];
            } else if (verein === "liednummer2") {

Das vollständige HTML hänge ich an, ich habe es nur oberflächlich getestet.

Mehr als eine Woche vergangen und keine Reaktion vom TO. Wollte er nur seinen Link getarnt unter bringen? Für die Beantwortung der Frage hat der Link keinen Nutzen.

Ja, ich denke, wir sollten das so machen, das ist wahrscheinlich am einfachsten:

        function jsonupload() {
            var json;
            var isValid = true;
            var verein = document.querySelector('input[name="verein"]:checked').value;
            if (verein === "liednummer1") {
                var nummer1 = document.getElementById("nummer1").value;
                if (nummer1.value == '') isValid = false;
                json = [
                    { "text": [74, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1] },
                    { "text": [83, 36, nummer1, "fonts/calibrib80", 1] },
                    { "text": [48, 105, "Ort", "fonts/bahnschrift20", 1] }
                ];
            } else if (verein === "liednummer2") {
                var nummer1 = document.getElementById("nummer1").value;
                var nummer2 = document.getElementById("nummer2").value;
                if (nummer1.value == '' || nummer2.value == '') isValid = false;
                json = [
                    { "text": [74, 5, "MUSIKKAPELLE", "fonts/bahnschrift20", 1] },
                    { "text": [7, 36, nummer1, "fonts/calibrib80", 1] },
// usw.
// und am Schluss:
            // Gibt es keine Elemente mehr, die ":invalid" sind
            // und sind alle Eingabefelder ausgefüllt?
            const invalidElems = theForm.querySelectorAll(':invalid');
            if (invalidElems.length == 0 && isValid) {
                // Alle Elemente OK, wir können das JSON hochladen
                params = new FormData();
//usw.