Zur Navigation

Web SQL nutzen [3]

21 Kokarde

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

26.09.2016 15:22

22 Jörg

Da ist die schließende Klammer wohl falsch gesetzt:

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

Das Array [id,...] ist das zweite Argument von tx.executeSql(), muss also auch innerhalb der Funktionsklammern stehen:

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

26.09.2016 15:40 | geändert: 26.09.2016 15:41

23 Kokarde

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>

27.09.2016 07:30 | geändert: 27.09.2016 07:35

24 Jörg

Vorweg: ich würde es empfehlen, den Code insgesamt sauber einzurücken. Bei längeren Abschnitten wird es sonst schwierig, diesen zu lesen und Fehler von falsch gesetzten Klammern zu erkennen.

Sowohl db.transaction() als auch tx.executeSql() haben ein optionales Argument, in welchem eine Funktion angegeben werden kann, die im Fehlerfall ausgeführt wird (bei db.transaction() das zweite und bei tx.executeSql() das vierte Argument)

Die Erfolgsmeldung sollte wiederum in der Funktion ausgegeben werden, die im Erfolgsfall ausgeführt wird (bei tx.executeSql() das dritte Argument)

Also so in etwa (ungetestet):

function onError(transaction, error) {
  alert("Fehler : " + error.message);
}

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

Mit den Fehlermeldungen kommt man dann ggf. weiter

27.09.2016 10:24 | geändert: 27.09.2016 10:25

1 Forenmitglied fand diesen Beitrag gut

25 Kokarde

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

27.09.2016 12:07 | geändert: 27.09.2016 12:08

26 Kokarde

Nachtrag: Deine schicke Lösung funktioniert auch einwandfrei und die Fehlermeldungen sind sehr hilfreich! Habe mal einen Fehler eingebaut und schon konnte man sehen das bei der Übergabe einer Variablen ein ganz anderer Name benutzt wurde wie in der Verarbeitung und daher der Insert z. B. nicht klappen kann.

Ich rate JEDEM das bis zum finalen Run genau so umzusetzen!!!

28.09.2016 09:43

27 Kokarde

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

28.09.2016 16:15

28 Jörg

Das liegt möglicherweise an der nicht korrekten HTML-Verschachtelung:

        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>';

So geht es halt nicht:

<td>
    <form>
</td>
<td>
</td>
<td>
    </form>
</td>

Der Browser muss das <form> hier schon mit dem ersten folgenden </td> schließen, so dass der Submit-Button außen vor bleibt

Probier mal, ob es geht, wenn du das <form> in eine einzelne <td> packst.

28.09.2016 19:38 | geändert: 28.09.2016 19:39

1 Forenmitglied fand diesen Beitrag gut

29 Kokarde

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???

29.09.2016 08:15