Dynamisches Schreiben und Lesen einer Datenbank ohne laden einer Seite

P1977

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

Arne Drews

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?

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

P1977

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

Arne Drews

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?

P1977

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

Arne Drews

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.

P1977

Hallo,

Soweit bin ich mal.
Hier der Javascript Code

PHP

function check_auftrag(){
    var Int_Auftrag=document.getElementById("Auftrag").value;
    var Int_Position=document.getElementById("Position").value;
    //alert(Int_Auftrag+'\n'+Int_Position);
    if (Int_Auftrag && Int_Position) {
        var request=false;
        var url="auftrag_speichern.php";
        request=new XMLHttpRequest();

        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var TeileNummer=this.responseText;
                document.getElementById("TeileNummer").value=TeileNummer;
                //alert(this.responseText);
            }
        }


        request.open('post', url, true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        request.send('Auftrag='+Int_Auftrag+'&Position='+Int_Position);

        //alert("Abfrage Ausgefuehrt");

        document.getElementById("TeileLaufzeitMin").value="0";
        document.getElementById("TeileLaufzeitSec").value="0";

        TeileLaufzeit();
    }
}


function TeileLaufzeit(){
    var Int_Min=parseInt(document.getElementById("TeileLaufzeitMin").value);
    var Int_Sec=parseInt(document.getElementById("TeileLaufzeitSec").value);

    Int_Sec=Int_Sec + 1;
    if (Int_Sec==60){
        Int_Min=Int_Min + 1;
        Int_Sec=0;
    }

    document.getElementById("TeileLaufzeitMin").value=Int_Min;
    document.getElementById("TeileLaufzeitSec").value=Int_Sec;

    setTimeout(TeileLaufzeit, 1000);
}

Alles anzeigen

und hier der PHP code fürs Speichern

PHP

<?php
    include ("bibliotheken/php/datenbank.php");

    if (isset($_POST['Auftrag']))
    {

        $Auftrag=$_POST['Auftrag'];
        $Position=$_POST['Position'];
        $SQL_Statement="INSERT INTO arbeitsauftrag (auftrag, position) VALUES ('".$Auftrag."','".$Position."')";

        $Result=DB_Zugriff($SQL_Statement);

        echo "201902120001";
    }
?>

Alles anzeigen

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

Arne Drews

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 ):

PHP

var Int_Min = 0;
var Int_Sec = 0;


function check_auftrag() {


    Int_Auftrag = document.getElementById( 'Auftrag' ).value;
    Int_Position = document.getElementById( 'Position' ).value;


    if (Int_Auftrag && Int_Position) {


        url = 'auftrag_speichern.php';
        PostData = 'Auftrag=' + Int_Auftrag + '&Position=' + Int_Position;


        request = new XMLHttpRequest();
        request.addEventListener( 'load', function(e) {
             document.getElementById( 'TeileNummer' ).value = this.responseText;
        });


        request.open( 'post', url, true );
        request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
        request.send( PostData );


        TeileLaufzeit();


    }


}




function TeileLaufzeit(){


    Int_Sec++;


    if ( Int_Sec == 60 ) {


        Int_Min++;
        Int_Sec = 0;


    }


    document.getElementById( 'TeileLaufzeitMin' ).value = Int_Min;
    document.getElementById( 'TeileLaufzeitSec' ).value = Int_Sec;


    setTimeout( TeileLaufzeit, 1000 );


}

Alles anzeigen

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

Auf jeden Fall gut umgesetzt durch Eigeninitiative und Fleiß!

Gruß Arne

P1977

Hallo,

Danke werde mir das noch ansehen.

mfg Peter

Tags