Dynamisches Schreiben und Lesen einer Datenbank ohne laden einer Seite

  • Hallo,

    Benötige etwas Hilfe bzw. die Internet Seiten und/oder Bücher für ein bestimmtes Problem.

    in einem HTML Formular habe ich 4 Eingabe Felder
    der einfach halber hier als Feld1 Feld2 Feld3 und Feld4 dargestellt

    in Feld1 und Feld2 soll eine Zahl eingegeben werden wenn beide gefüllt sind so
    soll diese in eine Datenbank geschrieben werden. Ohne das die Seite neu geladen wird
    im Selben Atemzug soll eine Nummer generiert werden.
    diese besteht JJJJMMTTXXXX
    JJJJ=Jahrzahl
    MM=Monat
    TT=Tag
    XXXX=Fortlaufende Zahl fuer diesen Tag
    wie ich dese nummer generiere weiß ich ist recht einfach
    -- Nummer mit Jahr Monat Tag generieren in einer Tabelle nachsehen ob diese Nummer Exisiert
    -- wenn Ja Nummer Auslesen 1 Dazu Addieren und zurückschreiben
    -- wenn nein Neuen Datensatz Anlegen

    diese wird auch in die Tabelle geschrieben zusammen mit Feld1 und Feld2.
    Diese generierte Nummer soll auf der gleichen Seite wo auch Feld1 und Feld2 eingegeben wurde
    in das Feld3 geschrieben werden.

    wenn das alles erledigt ist soll eine "Stoppuhr" in Feld4 starten. diese dann in MMM:SS


    Das ganze Ohne Seite neu laden Funktionert mittels AJAX hier wird die Datei jquery.js benötigt
    jetzt benötige ich mal gute Seiten wo ich mich mal einlesen kann.

    Danke mfg Peter

    • Offizieller Beitrag

    Also fehlt Dir im Grunde nur noch die Stoppuhr?

    Zitat

    Funktionert mittels AJAX hier wird die Datei jquery.js benötigt

    Du hast also jQuery nur wegen dem AJAX-Request eingebunden? :shock:

    Zitat

    jetzt benötige ich mal gute Seiten wo ich mich mal einlesen kann.


    https://developer.mozilla.org/en-US/docs/Web/JavaScript

    und nochmal zur Info speziell was AJAX angeht: https://developer.mozilla.org/en-US/docs/Web…_XMLHttpRequest

  • Hallo,

    Danke.

    Zitat

    Also fehlt Dir im Grunde nur noch die Stoppuhr?

    Sozusagen Ja. es fehlen aber auch noch andere sachen aber das ganze Step by step.

    Zitat


    Du hast also jQuery nur wegen dem AJAX-Request eingebunden?


    Ja durch den XMLHttpRequest das anzeige was ich dann gefunden habe war das die Jquery benötigt wird.


    mfg Peter

    • Offizieller Beitrag
    Zitat

    Ja durch den XMLHttpRequest das anzeige was ich dann gefunden habe war das die Jquery benötigt wird.

    Ist aber Quatsch, siehe 2. Link in #2.
    Mit jQuery wird das zwar augenscheinlich ein Einzeiler, aber dafür lädst Du die komplette Library - aktuell in der 3.3.1 Version ~85kB?!
    Das macht gelinde gesagt keinen Sinn...

    Was fehlt Dir denn für die Stoppuhr? Hast Du mal gesucht, wie man das machen könnte?

  • Hallo,

    Zitat


    Ist aber Quatsch, siehe 2. Link in #2.

    bin ich mir gerade beim Ansehen.

    Zitat

    Mit jQuery wird das zwar augenscheinlich ein Einzeiler, aber dafür lädst Du die komplette Library - aktuell in der 3.3.1 Version ~85kB?!
    Das macht gelinde gesagt keinen Sinn...

    Ja lade ich im Moment die ganze Library und diese ist nicht nur augenscheinlich ein Einzeiler.
    Da ist sicherlich richtig das nur für diese eine Funktion die vielleicht 1kb hat 84kb mit geladen werden
    .

    Zitat


    Was fehlt Dir denn für die Stoppuhr? Hast Du mal gesucht, wie man das machen könnte?


    Stoppuhr habe ich noch nicht angesehen. und auch noch nicht explizit danach gesucht.
    ist aber eine einfache Funktion die sich jede Sekunde selbst Aufruft. ist sehr wahrscheinlich sehr stark vereinfacht.

    mfg Peter

    • Offizieller Beitrag
    Zitat

    ist aber eine einfache Funktion die sich jede Sekunde selbst Aufruft. ist sehr wahrscheinlich sehr stark vereinfacht.

    Nein, eigentlich ist es genau so einfach.
    Schau Dir mal setTimeout() an ( setInterval empfehle ich nicht! ). Du musst halt nur darauf achten, dass Du bei Ablauf von 60s auch die Minuten anpasst.
    Interessant dürfte dann auch die Date-Komponente sein.

    Versuch einfach mal und melde Dich, wenn es Probleme gibt.

  • Hallo,

    Soweit bin ich mal.
    Hier der Javascript Code

    und hier der PHP code fürs Speichern


    Hat ein wenig gedauert
    zuerst einmal wurde nicht gespeichert. probiert was möglich ist war keine Chance
    nach einmal Kurzen Pause und Neustarten des Rechners hat es Funktioniert.
    Nehme mal an das irgendwo nicht richtig Aktualisiert wurde.

    Funktioniert jetzt. Dann wie bekomme ich einen Wert wieder Retour.
    Funktioniert nach einigen Suchen mit Response
    Bekomme den Wert Retour mit Alert wird dieser auch ausgegeben.
    aber nicht ins Input Feld geschrieben nach gefühlter Stunde den input type von number auf text geändert und schon steht dieser drinnen.

    Dies passt jetzt alles

    Danach die Teile Laufzeit erstellt
    von Anfang an fast gepasst
    im Minuten Feld erscheint

    1
    11
    111
    1111
    11111

    OK Das als Int Definieren bzw umwandeln als INT
    dann noch in der IF Abfrage für die 60 Sekunden ein Zweites = einfügen und es läuft richtig

    Jetzt Läuft dies und darauf kann ich das Weitere Aufbauen.

    Danke mfg Peter

    • Offizieller Beitrag

    Hallo,

    Finde ich lobenswert, dass Du Dir das wirklich angesehen und sogar umgesetzt hast!
    Sieht auch soweit ok aus. Ich würde da höchstens noch etwas Übersichtlichkeit rein bringen ( ist aber meine subjektive Auffassung, keine fachliche! ).

    Zunächst mal solltest Du darauf achten, dass Du mit getElementById auch erst auf die Elemente zugreifst, wenn die bereits im DOM vorhanden sind.
    Ein HTML-Dokument wird vom Browser sequentiell aufgebaut, d.h.:

    HTML
    <script>console.log( document.getElementById('test') );</script>
    <div id="test">something</div>


    würde zu einem undefined oder null führen, wohingegen das hier funktioniert:

    HTML
    <div id="test">something</div>
    <script>console.log( document.getElementById('test') );</script>


    Nun gibt es unterschiedliche Ansichten, wie man dafür sorgt, dass das Element vor dem Zugriff verfügbar ist.
    Auch in vielen Frameworks wird einfach der Script-Teil ans Ende des Document-Body gesetzt, also vor das </body>.

    Ich persönlich habe meine JS-Scripte nach Möglichkeit immer im <head>-Bereich. Hier muss man dann halt dafür sorgen, dass auf das Laden des Dokumentes gewartet wird.
    Das machen sog. EventListener für uns. Meine JS-Scripte haben immer folgenden Rumpf:

    Code
    document.addEventListener( 'DOMContentLoaded', function(e) {
    
    
        // hier kann mein gesamter JS-Code rein...
    
    
    });


    Der JS-Code innerhalb des Rumpfes wird erst ausgeführt, wenn das Ereignis ( Event ) eintritt, dass das Dokument komplett aufgebaut ist.
    Ein undefined oder null kann dann nur noch kommen, wenn ich bei der ID einen Schreibfehler habe, es das Element also gar nicht gibt.

    Ok, was Deinen Code angeht, würde ich den evtl. so schreiben ( Variablenbezeichner habe ich so belassen, damit es sich für Dich besser liest ):


    Wenn Du Fragen dazu hast, kannst Du hier gerne fragen.

    Auf jeden Fall gut umgesetzt durch Eigeninitiative und Fleiß!

    Gruß Arne