[ERLEDIGT] Button value als Variable möglich?

colaholiker · 25 August 2023

Sclero2004 schrieb:
Ich hätte nicht gedacht, dass sich overflow-wrap vererbt, ist aber anscheinend der Fall, denn dein CSS funktioniert ja.

was noch zu beweisen war.
Und ja, ein überlanger Ordnername und ein langer Dateiname werden in beiden Spalten umgebrochen, zu einem Querscrollen kommt es nicht.

Damit könnte das Thema abgeschlossen sein. Aber auf die alte <ul>- Leiste kann ich immer noch nicht verzichten, es gibt noch einen Unterschied zwischen direktem (Link-) Button und Fetch- Code:

geht mit der Darstellung der Webseite was schief (Anzeige "null") funktionieren die Linkbuttons noch, die "neuen" mit Fetch leider nicht.

Das scheint entweder am Fehlerzustand der Webseite oder am Receive-Teil der Fetch- Routine zu liegen.

Meine Versuche ergeben, daß wohl beide Fälle zutreffen, da ich als Referenz den neuen Home- Button benutze, der nicht zum Fetch führt. Wenn die Fetch- Buttons nicht reagieren, klappt dieser Home-Button mal, und mal nicht.

Sclero2004 · 25 August 2023

geht mit der Darstellung der Webseite was schief (Anzeige "null") funktionieren die Linkbuttons noch, die "neuen" mit Fetch leider nicht.

Da vermute ich stark, dass wegen dieses "null" ein Fehler im Javascript auftritt und in Folge die Eventlistener nicht mehr registriert werden. Hast Du einen Blick in die Console geworfen?

colaholiker · 25 August 2023

Sclero2004 schrieb:
Da vermute ich stark, dass wegen dieses "null" ein Fehler im Javascript auftritt und in Folge die Eventlistener nicht mehr registriert werden. Hast Du einen Blick in die Console geworfen?

noch nicht. Ich teste erstmal alle Fälle. Stimmt, wenn HTML hängt dürften die Originalbuttons auch nicht gehen, also: Javascript.

Von Excel VBA kenne ich zum Fehler abfangen den Befehl "OnError goto". Gibt es was Ähnliches in Javascript?

Der Receive- Teil von Fetch wird mich aber trotzdem beschäftigen. Ich werde noch 2 weitere Buttons benötigen: <ul> Ordner erstellen und (in der Tabelle) Ordner umbenennen.
Und ich habe gelernt daß die Aktion in Javascript im unteren Fetch- Teil ausgelöst wird.

Sclero2004 · 26 August 2023

Von Excel VBA kenne ich zum Fehler abfangen den Befehl "OnError goto". Gibt es was Ähnliches in Javascript?

Gibt es auch in Javascript: try und catch, damit kann man verhindern, dass das Skript bei einem Fehler abbricht. Ich benutze es aber selten, wenn man es nicht einsetzt, sieht man sofort wo ein Fehler aufgetreten ist.

colaholiker · 27 August 2023

Sclero2004 schrieb:
Gibt es auch in Javascript: try und catch, damit kann man verhindern, dass das Skript bei einem Fehler abbricht. Ich benutze es aber selten, wenn man es nicht einsetzt, sieht man sofort wo ein Fehler aufgetreten ist.

Aha. Du hast recht wegen der Fehlersuche, aber dafür kann man es doch auskommentieren.
Aber ich sehe ein, daß es für mir vorerst nichts bringt.

Das "null" tritt dann auf, wenn keine Antwort (Fetch: response.text) erfolgt.
Also kein neuer Tabellen- content geliefert wird.

Das ist ja auch nicht immer gewollt. Zum Bsp. beim Download- Button in der Tabelle soll die Datei ohne Änderung der Webseite auf den PC geladen werden.

Der alte Download-Button und der neue Fetch- Download-Button senden die gleichen Informationen zum C++ Code und werden gleichermaßen verarbeitet:

Code:

    File download = SD.open(Pfad + "/" + filename);
 
    if (download)
    {
      server.sendHeader("Content-Type", "text/text");
      server.sendHeader("Content-Disposition", "attachment; filename=" + filename);
      server.sendHeader("Connection", "close");
      server.streamFile(download, "application/octet-stream");
      download.close();
      }

In der Fetch- Routine bleibt "response.text()" leer und es wird "null" angezeigt, weil es keine neue Tabelle gibt.
Ähnlich ist das auch mit anderen Buttons, aber ich beschäftige mich gerade nur mit "Download" um mal auf den "alten" Button verzichten zu können.

Läßt sich evtl. im Empfangsteil der Fetchroutine (mit IF?) eine Verzweigung für solche Fälle einbauen?

Müßte ich evtl. den C++ Code anpassen (server.send... bzw. server.stream...) um der Fetch- Routine antworten zu können?

Sclero2004 · 27 August 2023

Läßt sich evtl. im Empfangsteil der Fetchroutine (mit IF?) eine Verzweigung für solche Fälle einbauen?

Natürlich, Du kannst dort mit if abfragen ob der empfangene Text leer ist, etwa so:

Code:

.then(response => response.text())
.then(txt => {
    if (txt != '') {
        // etwas mit dem Text machen
    } // else-Zweig brauchen wir nicht
})

colaholiker · 27 August 2023

Sclero2004 schrieb:
// else-Zweig brauchen wir nicht

Hier kämen dann die Antworten von C++ die keine aktuelle Tabelle erzeugen.
Dann müßte die Abfrage oben

Sclero2004 schrieb:
if (txt != '') {

aber spezifischer sein wie zB. "include '<!DOCTYPE html>' (im else auch).
Hab ich wieder Probierfutter...

Sclero2004 · 27 August 2023

Verstehe ich jetzt nicht mehr:

Sclero2004 schrieb:
Sclero2004 schrieb:

// else-Zweig brauchen wir nicht

Zum Vergrößern anklicken....

Hier kämen dann die Antworten von C++ die keine aktuelle Tabelle erzeugen.

Hatte ich so verstanden, dass in dem Fall die Antwort ein Leerstring ist und damit kann man nichts machen.
Also kann der else-Zweig entfallen.

Sclero2004 schrieb:
Dann müßte die Abfrage oben

Sclero2004 schrieb:

if (txt != '') {

Zum Vergrößern anklicken....

aber spezifischer sein wie zB. "include '<!DOCTYPE html>' (im else auch).

Wenn man genau sein und Folgefehler vermeiden will, schon. Dann aber besser das Ergebnis des Parsens prüfen und ob es Erfolg hat wenn man etwas, z. B. mit querySelector, heraus holt.

colaholiker · 27 August 2023

Sclero2004 schrieb:
Hatte ich so verstanden, dass in dem Fall die Antwort ein Leerstring ist und damit kann man nichts machen.
Also kann der else-Zweig entfallen.

Ich mache es mir sicher zu einfach, aber die Fetch- Routine ist doch auf das Replace der Tabelle ausgelegt.
Wenn ich nun (zB.) einen Download-Button in der Tabelle betätige erwarte ich zwar keine aktuelle Tabelle, aber auch keinen Leerstring.

Was immer im Download- Mode empfangen wird, soll in diesem 'else'- Abschnitt ausgewertet werden.

Weitere 'elses' für andere Buttons folgen noch, und das letzte 'else' kann dann entweder wegfallen oder das 'null' behandeln.

So stelle ich mir das jedenfalls vor.

Sclero2004 schrieb:
Dann aber besser das Ergebnis des Parsens prüfen und ob es Erfolg hat wenn man etwas, z. B. mit querySelector, heraus holt.

Das ist evtl. die richtige Lösung, aber:
vorerst landet im Dowload-Mode in ".then(response => response.text())" leider kein Text.
Ich hoffe ich konnte mein Vorhaben etwas besser erklären.

Sclero2004 · 27 August 2023

Verstehe, mir scheint, ich habe da Upload und Download verwechselt.

vorerst landet im Dowload-Mode in ".then(response => response.text())" leider kein Text.

Dort müsste eigentlich die Datei, die herunter geladen wurde, landen und wir müssten sie im Dateisystem speichern wobei der Benutzer das Verzeichnis wählen und ggf. den Dateinamen anpassen müsste.
D. h. wir müssten die Antwort vom Server als Blob auswerten:

Code:

.then(response => response.blob())
.then(blob => {
    // Hier müssen wir das Blob im Dateisystem speichern
})

Wie das Speichern funktioniert habe ich nicht im Kopf, ich muss es erst heraus suchen.

Ich hoffe, jetzt verstehe ich es richtig.

colaholiker · 27 August 2023

Sclero2004 schrieb:
Dort müsste eigentlich die Datei, die herunter geladen wurde, landen und wir müssten sie im Dateisystem speichern wobei der Benutzer das Verzeichnis wählen und ggf. den Dateinamen anpassen müsste.

Was in C++ passiert habe ich in #85 gezeigt, hier nochmal:

- File download = SD.open(Pfad + "/" + filename);

also die Variable "download" enthält den Zugang zur Datei auf der SD- Karte.

- server.sendHeader("Content-Type", "text/text");
- server.sendHeader("Content-Disposition", "attachment; filename=" + filename);
- server.sendHeader("Connection", "close");
- server.streamFile(download, "application/octet-stream");
- download.close();

Letzteres ist auch klar, das Gegenstück für SD.open.

Zu server.streamFile(download, "application/octet-stream" habe ich noch gelesen, daß es so gestaltet ist, das die Dateiendung egal ist.

Das Verzeichnis muß nicht gewählt werden, es gilt der Windows- Standard "Downloads".

Was mich wundert ist, daß obiger Code nicht funktioniert wenn dieselben Eingaben vom Fetch- Code statt des Buttons kommen. "server.send..." wird in C++ ja ausgeführt.
Ist der Browser solange gesperrt bis ein response eintrifft?

Sclero2004 · 28 August 2023

Was mich wundert ist, daß obiger Code nicht funktioniert wenn dieselben Eingaben vom Fetch- Code statt des Buttons kommen. "server.send..." wird in C++ ja ausgeführt.

Mich wundert das nicht, denn wenn die Datei im Browser bzw. im then-Zweig des fetch ankommt, muss man ja etwas tun, damit sie auch im Dateisystem gespeichert wird.
Damit wir wissen, woran wir sind, lass doch mal den Typ des empfangenen Blob in der Console ausgeben:

Code:

.then(response => response.blob())
.then(blob => {
    console.log(typeof blob);
    // Hier müssen wir das Blob im Dateisystem speichern
})

colaholiker · 28 August 2023

Sclero2004 schrieb:
Mich wundert das nicht, denn wenn die Datei im Browser bzw. im then-Zweig des fetch ankommt, muss man ja etwas tun, damit sie auch im Dateisystem gespeichert wird.

Ja aber der Originalbutton startet den C++ Code, der Fetchbutton auch.
Laufen also die server.send- Befehle im 2.Fall nur in die Fetch- Antwort oder gehen sie "ins Leere"? Das muß sich vom alten Button ja unterscheiden.

Zur blob- Sache hab ich lange probiert wohin ich den Code in meine Fetch- Routine setzen soll. Jetzt habe ich quasi "unten" alles ersetzt.

Da das immer noch nicht klappt hier mal die aktuelle Funktion:

Code:

        function sendtoMCdir(action, fileName) {
            const params = new FormData();
            params.append('0', action + '_' + fileName);
            fetch('dir?', {
                method: 'post',
                body: params
            })
            .then(response => response.blob())
            .then(blob => {
                console.log('============ myblobtype:');
                console.log(typeof blob);
            });
        }

Was beim Button drücken in der Console passiert: garnichts.
(fast: es wird ei Fehler in einer Mozilla- Datei angezeigt: TypeError: i.app is undefined)

In C++ kommen die Daten (action, fileName) an.
Es könnte sein daß das Zurücksenden anders aussehen muß, etwa in der Form

Code:

[C++]
server.send(200, "text/plane", nameValue);

(als Beispiel eine Zeile "irgendwo" im Code gefunden)

Eine Frage zu ".then":
Das erste .then endet ohne Semikolon, das zweite mit. Ist das ok?

colaholiker · 28 August 2023

Gedankenblitz...
Ich sende action, filename zum C++- Code und möchte mit response ziemlich dasselbe empfangen???
Wenn der Download nicht in C++ ausgelöst wird ist das doch ein doller Umweg! Oder?

- habs jetzt mit
server.send(200, "text/plane", nameValue);
getestet, Ergebnis wie oben.

Sclero2004 · 29 August 2023

Da der Download nach dem alten Verfahren ja funktioniert, denke ich, wir brauchen den Fehler nicht im C++ zu suchen.

Das erste .then endet ohne Semikolon, das zweite mit. Ist das ok?

Ich habe in den Demos nach gesehen, die ich in der Schublade habe und ja, das ist OK.

Was beim Button drücken in der Console passiert: garnichts.

Dann sieh am besten im Network-Tab in den Entwicklerwerkzeugen nach, was passiert. Du findest dort sowohl den Request, der an den Server geschickt wird, als auch die Response, mit der dieser antwortet.

colaholiker · 29 August 2023

Ja, da ist zu sehen daß was empfangen wird.

colaholiker schrieb:
server.send(200, "text/plane", nameValue);

habe ich mal in "text/text" geändert.
Ich hab mal eine .har Datei erstellt. Zwei Ereignisse werden dargestellt:
- obere Zeile mit Originalbutton (Download ist auch erfolgt)
- untere Zeile mit Button über Fetch.

Auch in der Antwort mit dem Originalbutton taucht die Antwort "Test-Blob" auf, weil die oben genannte Zeile aktiv ist. Zum erfolgten Download ("server.sendHeader(... usw.") finde ich in der Netzwerkanalyse nichts. Dann läuft der Download evtl. nicht über den Browser.

colaholiker · 29 August 2023

Ich möchte noch folgendes nachreichen zum Original-Download:

Code:

    File download = SD.open(Pfad + "/" + filename);
    if (download)
    {
      server.send(200, "text/text", "Test-blob");

      //--server.sendHeader("Content-Type", "text/text");
      //--server.sendHeader("Content-Disposition", "attachment; filename=" + filename);
      //--server.sendHeader("Connection", "close");
      //--server.streamFile(download, "application/octet-stream");
      //--download.close();
    }

Nur mit Senden des "Test-blob" per Originalbutton erfolgt schon ein Download!!!
Kommentiere ich diese Zeile auch noch aus gibt es keinen Download.
Da brat mir einer nen Storch.

Sclero2004 · 29 August 2023

Platziere das console.log doch mal eine Stufe höher:

Code:

       function sendtoMCdir(action, fileName) {
            const params = new FormData();
            params.append('0', action + '_' + fileName);
            fetch('dir?', {
                method: 'post',
                body: params
            })
            .then(response => {
                console.log('============ myresponse:');
                console.log(response);
                return response.blob();
            }).then(blob => {
                console.log('============ myblobtype:');
                console.log(typeof blob);
            });
        }

Und poste wie das HTML von dem ursprünglichen Button aussieht.

Sclero2004 · 29 August 2023

Jetzt musste ich mehrmals editieren, lade noch mal neu, bitte.

colaholiker · 29 August 2023

Ok. Vorneweg noch zu #97:
Getestet : Zeile server.send(200, xyz mit dem Original Downloadbutton
"text/text" - download erfolgt
"text/plane" - download erfolgt
"text/blob" - download erfolgt
"text/html" kein download, Anzeige "Test-blob" im Browser (und HTML gelöscht).

Jetzt den Code mit den Buttons. Ich zeige alle 4 Buttons, weil ich sie aus Anzeigegründen zusammen in die Form gepackt habe.
Der Original- Download- Button ist "Class 2x":

Code:

<td style='white-space:pre;'>
    <form action='/dir' method='post'>
        <button class='2' data-action='download'>Download</button>
        <button class = '2x' type='submit' name='reserve' value='download_001-Anfang.htm'>Download old</button>
        <button class='4' data-action='qren'>Rename</button>
        <button class='questDel' data-action='qdel'>l&ouml;schen</button>
    </form>
</td>

Der Test mit dem neuen Console.log aus #98 ergibt für den neuen Button ("Class 2") keine Anzeige in der Console, bei drücken des Originalbuttons (2x) erscheint:

POSThttp://192.168.178.49/dir (zum Aufklappen) und
darunter das Prompt (>>) wieder ohne Log- Meldungen.

[ERLEDIGT] Button value als Variable möglich?

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Anhänge

Mitglied

Mitglied

Mitglied

Mitglied