Web SQL nutzen [3]

Hi Jörg

Antwort zu 27

Aha, die Leerstellen, ich Schussel :(

Sieht jetzt so aus:

CODE

<script>
          
               // Setzen der Variablen url und hinschreiben des aktuellen Strings der vom Formular kommt 
      
    var url = window.location.href; 

     // zerschneiden der Stringübergabe vom Formular, für jedes Feld im Formular nötig! 
    
      var id = Date();

      var KISTE = /formmunitionskiste=([^&]+)/.exec(url)[1]; 
      var HERSTELLER = /formhersteller=([^&]+)/.exec(url)[1]; 
      var STUECKZAHL = /formstueckzahl=([^&]+)/.exec(url)[1]; 
      var KALIBER = /formkaliber=([^&]+)/.exec(url)[1]; 

alert("Es wird die folgende Munition eingetragen: " + KISTE + HERSTELLER + " mit " + STUECKZAHL + " Stück, vom Kaliber " + KALIBER);
      
      
var db = openDatabase('MUNITION', '1.0', 'Munitionsübersicht', 2 * 1024 * 1024);
          
             db.transaction(function (tx) {
             
tx.executeSql('INSERT INTO ' + KISTE +  ' (id,hersteller,stueckzahl,kaliber) VALUES (?,?,?,?)'),[id, HERSTELLER,STUECKZAHL,KALIBER];
                              
                 
    alert("OK! Munition in " + KISTE + " eingefügt!");
    
});
      

     
      </script>
        

Leider kommt kein Eintrag in der Tabelle an.
Die Ausgabe stimmt, da werden die Werte korrekt angezeigt.
In der Console kommt kein Fehler.

Ich werde noch Irre :))

Guten Morgen Jörg

Das müsst Ihr mal auschecken, damit wird eine tolle Tabelle generiert und nun habe ich eine schicke Ausgabe.

https://codepen.io/anon/pen/dpNaor

Muss nur noch sehen wie ich die Tabelle noch bisse besser formatiere :)

Zu * 30

Leider klappt dieses verdammt INSERT nicht.
Dabei hatte ich das schon mal hin bekommen, aber leider kein Backup gemacht.
Keine Fehlermeldung auf der Console, aber auch kein Inhalt in der Tabelle.

Mach ich überall dazwischen ALERTS kommen immer die korrekten Ausgaben. Auch ganz am Ende. Ich bin gerade etwas ratlos.

Hier der derzeitige Code.

<script>
          
               // Setzen der Variablen url und hinschreiben des aktuellen Strings der vom Formular kommt 
      
    var url = window.location.href; 

     // zerschneiden der Stringübergabe vom Formular, für jedes Feld im Formular nötig! 
    
      var id = Date();

      var KISTE = /formmunitionskiste=([^&]+)/.exec(url)[1]; 
      var HERSTELLER = /formhersteller=([^&]+)/.exec(url)[1]; 
      var STUECKZAHL = /formstueckzahl=([^&]+)/.exec(url)[1]; 
      var KALIBER = /formkaliber=([^&]+)/.exec(url)[1]; 

alert("Es wird die folgende Munition eingetragen in " + KISTE + ":" + HERSTELLER + " mit " + STUECKZAHL + " Stück, vom Kaliber " + KALIBER);
      
      
var db = openDatabase('MUNITION', '1.0', 'Munitionsübersicht', 2 * 1024 * 1024);
          
             db.transaction(function (tx) {
             
// Auskommentiert! 

// tx.executeSql('INSERT INTO ' + KISTE +  ' (id,hersteller,stueckzahl,kaliber) VALUES (?,?,?,?)'),[id, HERSTELLER,STUECKZAHL,KALIBER];


// Tipp von Jörg! 

tx.executeSql(
    'INSERT INTO ' + KISTE +  ' (id,hersteller,stueckzahl,kaliber) VALUES (?,?,?,?)',
    [id, HERSTELLER,STUECKZAHL,KALIBER]
);                           
                 
    alert("OK! Munition in " + KISTE + " eingefügt!");

    alert("CHECK AUSGABE " + KISTE + id + HERSTELLER + STÜCKZAHL + KALIBER);
    
});
      

     
      </script>

Hi, vielen lieben Dank.

Sehr guter Hinweis, den ich später noch einbauen / umbauen werde.

Hier der ganze vollständige Code, der auch funktioniert (getestet)!

Bin durch Zufall auf die Lösung gestoßen, als ich nochmal deinen Post zuvor genau gelesen habe und 2 Tassen Kaffee intus hatte :)))

<script>
          
     // Setzen der Variablen url und hinschreiben des aktuellen Strings der vom Formular kommt. 
      
     var url = window.location.href; 
      
     // Erzeugen einer ID für den späteren Eintrag in der Tabelle (Identifizierung Datensatz).  
      
      var id = Date();

     // zerschneiden der Stringübergabe vom Formular, für jedes Feld im Formular nötig! 

      var KISTE = /formmunitionskiste=([^&]+)/.exec(url)[1]; 
      var HERSTELLER = /formhersteller=([^&]+)/.exec(url)[1]; 
      var STUECKZAHL = /formstueckzahl=([^&]+)/.exec(url)[1]; 
      var KALIBER = /formkaliber=([^&]+)/.exec(url)[1];
      
      // Testausgabe der Variablen, um zu prüfen ob alles richtig angekommen.

      alert("Es wird die folgende Munition eingetragen in " + KISTE + ":" + HERSTELLER + " mit " + STUECKZAHL + " Stück, vom Kaliber " + KALIBER);
      
      // Öffnen der Datenbankverbindung, hier DB = MUNITION.

      var db = openDatabase('MUNITION', '1.0', 'Munitionsübersicht', 2 * 1024 * 1024);
      
      // Start der DB Transaction Funktion.
          
      db.transaction(function (tx) {
          
      // Start des INSERT in die entsprechende KISTE lt. Formular - also die executeSQL Anweisung.      
                      
      tx.executeSql('INSERT INTO ' + KISTE + ' (id, hersteller, stueckzahl, kaliber) VALUES (?,?,?,?)', [id, HERSTELLER, STUECKZAHL, KALIBER]);                            
      
// Testausgabe der Variable der KISTE aus dem Formular, um zu prüfen ob bis hier richtig angekommen.
          
      alert("OK! Munition in " + KISTE + " eingefügt!");   
          
          
      // Close der DB Transaction Funktion.
          
      });
      

      </script>

Jetzt mache ich mich an das EDIT, also die Auswahl eines vorhanden Datensatzes, der dann editiert werden muss. Das wird die nächste harte Nummer.

Bis jetzt habe ich:

- Eine neue Datenbank für Kisten erstellen (nicht optimiert = ohne Formular)
- Eine ganze vorhandene Datenbank löschen (nicht optimiert = ohne Formular)
- Eine neue Kiste in der Datenbank erstellen (optimiert = mit Formular)
- Eine vorhandene Kiste in der Datenbank löschen (nicht optimiert = ohne Formular)
- Einen Inhalt einer Kiste in der Datenbank hinzufügen (optimiert = mit Formular)
- Aktuelle Kisten der Datenbank mit Inhalt auslesen und darstellen (optimiert - automatisch durch script)

Mehr als ich mir bis dato eigentlich erträumt hatte.

Weiter gehts :)

Alter Schwede, jetzt wird es hardcore, jedenfalls für mich :)

Ich habe es doch tatsächlich geschafft einen Update-Button in diesen Code zu bauen, doch leider reagiert er nicht.

Habe schon die Hochkomma etc. genau gezählt und komme nicht drauf warum der Button nicht reagiert.

Kann Jemand was erkennen?

 function getResultSetFromTable(results, callback) {
      var length = results.rows.length;
      var j = 0;
      for (var i = 0; i < length; i++) {
        db.transaction(function(tx) {
          var k=0,tblname=results.rows[j++].tbl_name;
          tx.executeSql('SELECT * FROM ' + tblname , [], function(tx, results) {
            callback(tblname,results);
          });
        });
      }

    }

    function processResultSet(tblname,results) {
      console.log('----------------------'+tblname)
      var len = results.rows.length;
      var tbl = document.createElement('table');
      var trTblName = document.createElement('tr');
      var thTblName = document.createElement('th');
      thTblName.innerHTML = tblname;
      trTblName.colSpan = 2;
      trTblName.appendChild(thTblName);
      tbl.appendChild(trTblName);
        
     //create Table-Head

      var trHeader = document.createElement('tr');
      var th1 = document.createElement('th');
      th1.innerHTML = '<font color=orange>ID STEMPEL</font>';
      var th2 = document.createElement('th');
      th2.innerHTML = '<font color=red>HERSTELLER</font>';
      var th3 = document.createElement('th');
      th3.innerHTML = '<font color=green>STÜCKZAHL</font>';
      var th4 = document.createElement('th');
      th4.innerHTML = '<font color=blue>KALIBER</font>';
      var th5 = document.createElement('th');
      th5.innerHTML = '<font color=black>ACTION</font>'; 
      trHeader.appendChild(th1);
      trHeader.appendChild(th2);
      trHeader.appendChild(th3);
      trHeader.appendChild(th4); 
      trHeader.appendChild(th5);    
      tbl.appendChild(trHeader);
        
        //create Table-Inserts, show what is in the table

      for (var i = 0; i < len; i++) {

        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        td1.innerHTML = results.rows[i].id;
        var td2 = document.createElement('td');
        td2.innerHTML = results.rows[i].hersteller;
        var td3 = document.createElement('td');
        td3.innerHTML = '<form method="GET" action="edit_munition.html"><input name="formstueckzahl" type="text" value="' + results.rows[i].stueckzahl + '" size="5" maxlength="4" id="' + results.rows[i].id + '">';
        var td4 = document.createElement('td');
        td4.innerHTML = results.rows[i].kaliber;
        var td5 = document.createElement('td');
        td5.innerHTML = '<input type="submit" name="form" value="update"></form>';
          
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5); 
        tbl.appendChild(tr);
          
      }
      var body = document.getElementsByTagName('X')[0];
      body.appendChild(tbl);
      body.appendChild(document.createElement('hr'));
        

    }
            

Auf der Webseite sieht es cool aus.

Das input type="text" hat den richtigen Wert in allen Zeilen, der ja aus dem Auslesen der Tabelle und der entsprechenden Spalte kommt. Das find ich ja schon mal geil.

Für das spätere Update und die genaue Verifizierung nutze ich die ID des jeweiligen Datensatzes.

Doch wie bekomme ich die Werte nun rüber in die Datei die das alles verarbeitet.

Ein Link zu einem Beispiel etc. würde mir schon helfen.

ThanX

Jörg, Du hast natürlich vollkommen Recht, wie immer :)

So muss das aussehen:

        td3.innerHTML = '<form method="GET" action="edit_munition.html"><input name="formstueckzahl" type="text" value="' + results.rows[i].stueckzahl + '" size="5" maxlength="4" id="' + results.rows[i].id + '">' + " " + '<input type="submit" name="form" value="update"></form>';

Der Link, der nun produziert wird, sieht so aus:

file:///Users/Home/Demo/WebSQL%20DB/edit_munition.html?formstueckzahl=3&form=update

Es wird also die Variable mit der neuen Zahl korrekt übergeben.

Doch ... ein Problem!

Eigentlich müsste da auch die ID noch übergeben werden.
Ich denke da habe ich einen Denkfehler.
Hier, so vermute ich, muss ich ein zusätzliches "unsichtbares Feld" übergeben, in dem die ID steckt, damit der Datensatz beim Update in der Tabelle überhaupt verifiziert werden kann.

Es müsste ja korrekt eigentlich so aussehen:

file:///Users/Home/Demo/WebSQL%20DB/edit_munition.html?formstueckzahl=3&id=1234567890&form=update

Bin ich da auf dem richtigen Gedankengang???