Zur Navigation

Web SQL nutzen [5]

41 Jörg Kruse

Das Script würd ich in den head Bereich packen - der rudimtäre Aufbau der HTML-Datei sollte also in etwa so ausschauen:

<html>
<head>
    <title>Test</title>
    <script>
        <!-- hier das Script einfügen -->
    </script>
</head>
<body onload="runExample()">
    <div class=container>
        <form method="get" action="clear_munitionskiste.html" name="form">
            <!-- ... -->
        </form>
        <div id="status" name="status"><!-- ... --></div>
    </div>
</body>
</html>

Komme nicht klar, was das mit dem Callback auf sich hat.

Das zweite Argument hier ist der Name der Funktion, die als nächstes ausgeführt werden soll:

callback(results, processResultSet);

D.h. als nächstes wird processResultSet() ausgeführt, also die Tabelle ausgegeben

Das Dropdown wird aber durch die Funktion processResultSet2() ausgegeben, also musst du den Code entsprechend anpassen::

callback(results, processResultSet2);

05.10.2016 15:23 | geändert: 05.10.2016 15:25

42 Kokarde

*kaffeeeeeee*

So, einen schönen guten Morgen, hier in Berlin leider sehr schmuddelig.

Ich habe es genau so gemacht wie Du geschrieben hast.
Script in den Kopf geschoben und

callback(results, processResultSet2);

angepasst in der Funktion "function getAllTablesFromDB(callback)".

Ich habe sogar mal ganz mutig beide rein geschrieben, was aber dann dazu führt dass die Dritte, nämlich "processResultSet2", nicht mehr ausgeführt wird.

callback(results, processResultSet, processResultSet2);

Wieder was gelernt :)

Im Ergebnis sieht es leider so aus wie bei meinem Codebeispiel.

=> Es werden 2 Dropdowns erzeugt mit jeweils einem Wert "undefiniert" und einmal "leer", neben meinem Button für "Eingabe zurücksetzen"! :(

Kann ich hier auch Bilder anhängen?

Irgendwie sind wir auf dem richtigen Weg, aber es hängt noch was schief.

Bei meinem Code werden ja die Tabellennamen korrekt ausgegeben, auch untereinander, aber der Rest der Webseite wird nicht mehr geladen.

Scheinbar ist der ARRAY ja dann korrekt gefüllt, muss nur noch heraus finden wie man die Werte dann in ein Dropdown oder Select-Feld bekommt.

Und sag mal, muss das nicht anders aussehen?

function processResultSet2(selectName,results)

Nämlich so:

function processResultSet2(tblname,results)

Weil doch in "tblname" die Tabellennamen stehen die ich im Formular haben möchte.

Ich habe es mal ausprobiert, es bleibt aber beim Ausgabebild!

Habe alles hoch geladen, so dass man sehen kann wie es jetzt aussieht.

http://www.hardwareplattform.de/websql-db/form_create_neue_munitionskiste.html

Je Kiste die man anlegt, kommt ein neues Dropdown dazu :I

Ich habe bei dem ganzen HIN und HER auch bemerkt, dass wir im falschen Formular sind. Ich muss das Ganze ja im Formular für "neue Munition einer vorhanden Kiste hinzufügen" einbauen :)))))
Aber das ist jetzt erst mal egal.

06.10.2016 07:58

43 Jörg Kruse

=> Es werden 2 Dropdowns erzeugt [...] neben meinem Button für "Eingabe zurücksetzen"! :(

Ja, die Positionierung liegt daran, dass appendChild() das neue Element hinten anhängt. Das können wir anders lösen, indem wir an beliebiger Stelle ein Platzhalter-Element einbauen:

        <form method="get" action="clear_munitionskiste.html" name="form">
            <span id="select"></span>
        </form>

Diese beiden Zeilen:

    var form = document.getElementsByTagName('form')[0];
    form.appendChild(select);

... ersetzt du dann durch diese:

    document.getElementById('select').innerHTML = select;

Den Rest schau ich mir später nochmal an...

06.10.2016 11:30

44 Jörg Kruse

... Fortsetzung ...

Der Code mit den Callbacks ist schon etwas schwer zu erfassen

OK, du benötigst ja nur die Tabellennamen, also brauchen wir getResultSetFromTable() gar nicht ausführen. Stattdessen übergeben wir den Namen unserer Dropdown-Funktion als Callback:

    function runExample() {
      createDbAndTables();
      getAllTablesFromDB(processResultSet2);
    }

Die Dropdown-Funktion müssen wir jetzt auch noch etwas anpassen:

function processResultSet2(results) {
    var len = results.rows.length;
    var select = document.createElement('select');
    select.name = 'munitionskiste';
    for (var i = 0; i < len; i++) {
        var option = document.createElement('option');
        option.innerHTML = results.rows[i].tbl_name;
        select.appendChild(option);
    }
    document.getElementById('select').innerHTML = select;
}

Jetzt sollte in dem <span id="select"> nur ein Dropdown mit den Tabellennamen erscheinen

06.10.2016 11:48 | geändert: 06.10.2016 11:52

45 Kokarde

Hi

OK, huiii ... also, ich habe alles so gemacht.

Der Platzhalter <span id="select"></span> erzeugt leider nur die Ausgabe = "[object HTMLSelectElement]".

Ändere ich das jedoch in <select></select> kommt das Dropdown-Menü.

Das Menü ist jedoch leider leer.

Sicher das wir getResultSetFromTable nicht brauchen?
Dachte da werden die Tabellen-Namen sauber erzeugt.

Und was hat es mit dem Wort "munitionskiste" auf sich?
Muss das nicht auch irgendwie einem Sinn zugewiesen werden?

Der letzte Code laut deiner Info ist hoch geladen.

Ich habe mir erlaubt bei mir lokal das Skript mal ein wenig anzupassen, so das unten die Liste wieder erzeugt wird, die brauch ich ja für den Überblick vor dem Kistenerstellten.

Sieht dann so aus, Liste wird erzeugt aber ansonsten gleiches Bild wie oben.

<script>   
     
    // Skript bei @rushi - http://stackoverflow.com/questions/39620761/web-sql-javascript-show-all-tables-of-database
     
     // Erzeugt eine komplette Übersicht aller Tablellen in der DB und deren Inhalt
     
     var db;

    function runExample() {
      createDbAndTables();
      getAllTablesFromDB(processResultSet2);
        getAllTablesFromDB2(getResultSetFromTable);
    }

    function createDbAndTables(callback) {
      db = openDatabase('MUNITION', '1.0', 'Munitionsübersicht', 2 * 1024 * 1024);
      db.transaction(function(tx) {

      });
    }

    function getAllTablesFromDB(callback) {
      db.transaction(function(tx) {
        tx.executeSql('SELECT tbl_name from sqlite_master WHERE type = "table"', [], function(tx, results) {
          callback(results, processResultSet2);
     
        });
      });
    }
      
      function getAllTablesFromDB2(callback) {
      db.transaction(function(tx) {
        tx.executeSql('SELECT tbl_name from sqlite_master WHERE type = "table"', [], function(tx, results) {
          callback(results, processResultSet);
     
        });
      });
    }

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

      var trHeader = document.createElement('tr');
      var th1 = document.createElement('th');
      th1.innerHTML = '';
      trHeader.appendChild(th1);
      tbl.appendChild(trHeader);        

      for (var i = 0; i < len; i++) {
        var tr = document.createElement('tr');
        tbl.appendChild(tr);
      }
        
    
      var body = document.getElementsByTagName('X')[0];
      body.appendChild(tbl);

    }
     
     
  function processResultSet2(results) {
    var len = results.rows.length;
    var select = document.createElement('select');
    select.name = 'munitionskiste';
    for (var i = 0; i < len; i++) {
        var option = document.createElement('option');
        option.innerHTML = results.rows[i].tbl_name;
        select.appendChild(option);
    }
    document.getElementById('select').innerHTML = select;
}
    
  </script>

06.10.2016 12:38 | geändert: 06.10.2016 12:50

46 Jörg Kruse

Der Platzhalter <span id="select"></span> erzeugt leider nur die Ausgabe = "[object HTMLSelectElement]".

Hm, stimmt, ein Objekt kann man ja so nicht einfügen :/

Also benötigen wir doch appendChild(). Wir können anstelle dieser Zeile:

    document.getElementById('select').innerHTML = select;

diesen Code probieren:

    var parent = document.getElementById('select');
    parent.appendChild(select);

Sicher das wir getResultSetFromTable nicht brauchen?
Dachte da werden die Tabellen-Namen sauber erzeugt.

Da werden die Inhalte der Tabellen abgefragt! deswegen wurden auch mehrere Dropdowns angezeigt, pro Tabelle eins

Die Tabellennamen werden bereits mit getAllTablesFromDB() aus der Datenbank geholt

Und was hat es mit dem Wort "munitionskiste" auf sich?

Das ist der Name des selects - analog zu name="munitionskiste" im input - es soll ja nach der Auswahl so etwas wie munitionskiste=kiste1 übertragen werden

06.10.2016 12:59 | geändert: 06.10.2016 13:05

47 Kokarde

YES :)

Es funzt!

Jetzt ist aber plötzlich oben so ein Vermerk enthalten:

_WebKitDatabaseInfoTable_

Kann man den irgendwie raus schneiden oder unterdrücken?

Also dem Dropdown so ne Art Basiseintrag mitgeben, ähnlich wie "Bitte wählen Sie eine Kiste"?

Hab die Datei hoch geladen.

Grüße hoch entzückt!

06.10.2016 14:42 | geändert: 06.10.2016 14:42

48 Jörg Kruse

Jetzt ist aber plötzlich oben so ein Vermerk enthalten:

_WebKitDatabaseInfoTable_

Das ist vermutlich die Systemtabelle - die sollte natürlich nicht gelöscht werden :)

    for (var i = 0; i < len; i++) {
        if (tbl_name != '_WebKitDatabaseInfoTable_') {
            var option = document.createElement('option');
            option.innerHTML = results.rows[i].tbl_name;
            select.appendChild(option);
        }
    }

Also dem Dropdown so ne Art Basiseintrag mitgeben, ähnlich wie "Bitte wählen Sie eine Kiste"?

Vor der Schleife eine Option mit diesem Text und leerem Value einhängen:

    var option = document.createElement('option');
    option.innerHTML = 'Bitte wählen Sie eine Kiste';
    option.value = '';
    select.appendChild(option);
    for (var i = 0; i < len; i++) {
        if (tbl_name != '_WebKitDatabaseInfoTable_') {
            var option = document.createElement('option');
            option.innerHTML = results.rows[i].tbl_name;
            select.appendChild(option);
        }
    }

Wenn vorhanden, wird der Value übertragen und nicht der Text, so dass bei unveränderter Auswahl munitionskiste= übertragen wird, was das verarbeitendende Script leichter verarbeiten kann (wenn Parameter munitionskiste nicht vorhanden oder leer, abbrechen)

06.10.2016 16:02 | geändert: 06.10.2016 16:03

49 Kokarde

Happy Freitag :)

So, also dies hier führt leider zu einem Verschwinden des Dropdown-Menüs:

function processResultSet2(results) {
      
      
      
    var len = results.rows.length;
    var select = document.createElement('select');
    select.name = 'munitionskiste';
      
      
    for (var i = 0; i < len; i++) {
        if (tbl_name != '_WebKitDatabaseInfoTable_') {
            var option = document.createElement('option');
            option.innerHTML = results.rows[i].tbl_name;
            select.appendChild(option);
        }
    }
      
      
    var parent = document.getElementById('select');
    parent.appendChild(select);
      
      
}

Ich merke mal kurz an, dass diese WebKitDatabaseInfoTable im o. g. Array nicht mit angezeigt wird, sondern da werden wirklich nur KISTE1 und KISTE2 ausgegeben, falls das wichtig ist. Auch die Ursprüngliche unten angehängte Liste des original Scripts gibt nur KISTE1 und KISTE2 aus.

Das mit dem Basiseintrag ist nicht so wichtig, mir würde es schon reichen wenn diese komische Tabelle nicht mit ausgegeben werden würde.

Das mit dem zweiten Code-Block habe ich so gemacht.
Ist das richtig?
Weil es passiert leider auch nur das das Drop-Down weg ist, unten taucht schön die Liste auf, aber sonst auch nix.

function processResultSet2(results) {
      
      
      
    var len = results.rows.length;
    var select = document.createElement('select');
    select.name = 'munitionskiste';
      
      
    var option = document.createElement('option');
    option.innerHTML = 'Bitte wählen Sie eine Kiste';
    option.value = '';
    select.appendChild(option);
    for (var i = 0; i < len; i++) {
        if (tbl_name != '_WebKitDatabaseInfoTable_') {
            var option = document.createElement('option');
            option.innerHTML = results.rows[i].tbl_name;
            select.appendChild(option);
        }
    }
      
      
    var parent = document.getElementById('select');
    parent.appendChild(select);
      
      
}


07.10.2016 12:10

50 Jörg Kruse

Die Bedingung stimmt auch nicht ganz, der Tabellenname ist ja in results.rows.tbl_name gespeichert, so wäre es korrekt:

        if (results.rows[i].tbl_name != '_WebKitDatabaseInfoTable_') {

Aber dass der Fehler dazu führt, dass das Dropdown gar nicht angezeigt wird, ist schon komisch. Wurde irgendein Fehler in der Konsole ausgegeben? am HTML hast du nichts geändert?

Ich merke mal kurz an, dass diese WebKitDatabaseInfoTable im o. g. Array nicht mit angezeigt wird

Du meinst in Beitrag 44? da ist nicht klar, an welcher Stelle du das ausgibst. Mit "document.write" würde ich hier auch nicht operieren, weil dies nicht nicht zu einem Script passt, welches per onload Event geladen wird

07.10.2016 14:52 | geändert: 07.10.2016 14:55