Bei den beiden, Select2 und Selectize, jeweils zwei, einmal jQuery und dann das eigentliche Skript.
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.
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.
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.
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:
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:
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.
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:
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 };
}
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.Ja, ich denke ich verstehe es. Du hast da ja ein variables Formular wo die Felder nach Bedarf ein- und ausgeblendet werden. Wahrscheinlich kommen wir dann nicht daran vorbei, es Feld für Feld zu prüfen, wie Du es anfangs hattest. Ich sehe mir das mal an.
Setz mal bei allen Eingabefeldern, die erforderlich sind, das Attribut required, dann wird ebenfalls das Attribut ":invalid" gesetzt, wenn es leer ist.
<label>Lied 1: <input id="input-liedname-1" list="datalist-lieder" type="text" required></label>