Dec 16, 2018, updated at 10:06:11 (UTC)

4906

Javascript: WebSql

Guten Morgen zusammen,

zunächst einmal einen schönen dritten Advent.

Ich habe ein Problem mit Javascript und WebSQL. Bisher habe ich folgende Dinge immer im local Storage abgelegt, gespeichert und bei Bedarf wieder abgerufen.
Ich würde das gerne etwas "moderner" machen und die Daten in WebSQL ablegen.
Das Ablegen der Daten klappt. Nur die Abfrage und das Rückschreiben nicht.

Folgender Code wird für local Storage verwendet.

//Speichern der Daten:
$('#button_save_profil1').on('click', function(){  
$('input[type="text"]').each(function(){      
var name_save_txt_p1 = ('profil1_' + $(this).attr('name') );  
var id_save_txt_p1 = ('profil1_' + $(this).attr('id') );  
var value_save_txt_p1 = $(this).val();
localStorage.setItem(name_save_txt_p1, value_save_txt_p1);

//erweitert, Daten werden zus. per WebSQL gespeichert
db_gehalt.transaction(function (tx) {tx.executeSql("INSERT INTO Profil1 (Bezeichnung,value) VALUES (?, ?)", [name_save_txt_p1, value_save_txt_p1], null); });   
});  
});

Ab hier wird die Abfrage gemacht, die Daten wieder aus dem local Storage geholt, bzw. soll auch WebSQL gelesen werden.
Anschließend werden die Werte auch jeweils wieder in die Felder geschrieben (bei local Storage)

$('#button_load_profil1').on('click', function(){  
$('input[type="text"]').each(function(){      
var name_load_txt_p1 = 'profil1_' +  $(this).attr('name');  
// var value_load_txt_p1 = localStorage.getItem(name_load_txt_p1); //Abfrage von local Storage wegen WebSQL ausgeklammert. 

// Datenbank auslesen
var value_load_txt_p1 = db_gehalt.transaction(function(tx) {
	tx.executeSql('SELECT Wert1 FROM Profil1', , function(tx, rs) {  
		var len = rs.rows.length;
	  for (var i = 0; i < len; i++) { 
		var rowid1 = rs.rows.item(i). Wert1;
		console.log(rowid1);
	}
	});
  });
// Datenbank auslesen ende

$(this).val(value_load_txt_p1);
}); 

});

Mein Problem ist, dass die Abfrage der Tabelle irgendwo falsch ist. Vielleicht habe ich auch große Knöpfe auf den Augen und sehe den Fehler nicht.
Klicke ich den Button zum "laden" der Daten, läuft das in eine Endlosschleife und der Browser hängt sich auf.

Was ist daran falsch?

Please also mark the comments that contributed to the solution of the article

Content-Key: 395910

Url: https://administrator.de/contentid/395910

Printed on: April 19, 2024 at 10:04 o'clock

17 Comments

Latest comment

Kann sein, dass ich jetzt Unfug schreibe, jedoch ist "value" meist ein Schlüsselwort und könnte auch so interpretiert werden, d.h. es wird nicht als Variablenparameter interpretiert sondern eben als Schlüsselwort und damit schafft man sich eben Probleme.
Nenn also die Spalte in der DB um, sofern diese "value" heißt und ändere dahingehend auch dein INSERT und dein SELECT um. Es sollten hier keine möglichen Schlüsselwörter der nachfolgend verwendeten Programmier- und Abfragesprache Anwendung finden.

Hast du auch mal geprüft, ob die Daten auch korrekt in der Datenbank stehen (externer Datenbrowser)?

Ich habe es mal geändert, also von "value" nach "Wert1" und es macht keinen Unterschied.

Ja, die Daten kommen einwandfrei in der Tabelle an.
Sieht so aus, Beispiel:

rowid         Bezeichnung               Wert1
1             profil1_beispiel1         0.00
2             profil1_beispiel2         0.50

Hast du dies auch in deiner SELECT Abfrage angepasst oder steht da noch irgendwas von "value" drin?

PS.. OK siehe Script oben. Alles klar.

Was steht denn in der Variable zur Zeilenanzahl? Diese soltte ja auf 2 Elemente hindeuten. Im übrigen ist "len" auch oftmals ein Schlüsselwort.

wie gesagt. Lässt man das Script oben so laufen, hängt sich der Browser auf.
Da das console.log eingeschaltet ist, sieht man ja, dass es eine Dauerschleife ist und nicht endet.

Kurz: Wie ich es drehe und wende, ich finde den Fehler leider nicht.

...und was steht nun in der Variale "len"? Diese setzt sclhußendlich die Abbruchbedingung der Schleife, Kann diese überhaupt erreicht werden und was passiert innerhalb der Schleife? Debugger?

Wo hängt das Ding denn überhaupt?

Hallo,

sieht man doch oben im Code?

Hier nochmal der Ausschnitt.

var len = rs.rows.length;

Es ändert aber nichts an der Tatsache, dass es nicht klappt. Egal wie man sie nennt. Selbst wenn ich da nun "var len1 = rs.rows.length;" draus mache.

Das Ding hängt nicht, sondern es ist eine Endlosschleife und ich sehe nicht den Fehler warum.

Nochmal zum Verständnis. Exakt dieselben Werte stehen so auch in "local Storage". Beim Auslesen des local Storage und zurückschreiben in die jeweiligen Felder klappt alles ohne Probleme. Genauso wie das Umschalten einer z.B. Checkbox.

Das alles soll nun von local Storage auf WebSQL geändert werden, sprich der local Storage soll abgeschaltet werden.
Das Schreiben in die SQL_DB klappt ja ohne Fehler. Nur das Auslesen und zurückschreiben aus der DB klappt nicht.
Ich habe wahrscheinlich ein riesen Brett vor dem Kopf und sehe den Fehler nicht

Alles gut Kollege, ich will dir ja nix böses.

Was spuckt die Konsole denn aus?
Hast du schon mal den Wert deiner Stopbedingung geprüft, also was steht denn nun in "len" drinn? Lies diesen Wert doch einfach mal aus und lass dir diesen auf der Konsole anzeigen.
Prüf nochmal deine {} und () ob das alles passt und vor allem an der richtigen Stelle sitzt.

Wenn das in eine Endlosschleife geht, dann wird entweder die Abbruchbedingung nicht erreicht oder diese ist gar nicht vorhanden.

auch alles gut

Ich weiß, ich sehe das auch nicht als "Böse".

Ich habe mal ein Console.log auf das "len" gesetzt". Er Spuckt "1458" aus, was wiederum genau die Anzahl der Reihen in der DB beträgt.

Du meinst wohl Zeilen in der DB, oder?

Fütter die DB doch mal nur mit 5 wohl definierten Zeilen und versuch diese auszulesen.

In "len" müsste dann 5 stehen.
Gib auch mal die Laufvariable i mit aus, damit man sieht wie diese incrementiert wird.

Evtl. auch mal len um 1 vor der Schleife incrementieren und als Abbruchbedingung != setzen. Sobald i = len ist sollte die Schleife der logik nach ja abrrechen, weil eben die Abbruchbedingung erreicht ist.

var rowid1 = rs.rows.item(i). Wert1

Tippfehler (Leerzeichen zwischen . und Property)!

'SELECT Wert1 FROM Profil1'

Du weist aber schon wie Selects funktionieren?
Normalerweise sieht dieser ja meist so aus wenn man einen bestimmten Eintrag holen möchte:

SELECT Name,Wert FROM TABELLE WHERE Name = 'feldXYZ'

Und überhaupt, wieso setzt du auf ein totes Pferd WebSQL??

Gruß A.

Also bei einem Tippfehler würde sich der Interpreter beschweren und anscheinend wird die Variable trotzdem irgendwie bedient. Deswegen drängte ich ja auch drauf, dass man den Wert hier auch mal mit den Zeilen in der DB verifiziert.

Eine where clause ist nicht norwendig, sofern man keine Einschränkungen macht. Hier wird eben einfach der gesamte Tabelleninhalt bzw. alle Zeilen zurück gegeben. Daran soll es nicht liegen.

Da die Frage nun den Status gelöst hat.. was war es denn?

Zitat von @yamaha0815:
Eine where clause ist nicht norwendig, sofern man keine Einschränkungen macht. Hier wird eben einfach der gesamte Tabelleninhalt bzw. alle Zeilen zurück gegeben. Daran soll es nicht liegen.

Macht dann aber bei der Zeile:

$(this).val(value_load_txt_p1);

wenig Sinn

. Ich denke er will ja die Felder alle wieder mit Ihrem Inhalt bestücken. Und bei jedem Feld alle Einträge der DB zu durchlaufen ist auch nicht sinnvoll.
Vermutlich entspricht das was da oben steht schon lange nicht mehr dem tatsächlichen Stand seines jetzigen Codes.

Da die Frage nun den Status gelöst hat.. was war es denn?

Vermutlich wieder nur verklickt, wie immer ...

Naja, wer weiß was da in this drin steht. Wir wissen es ja nicht.
Ist ja auch nicht weiter relevant, wenn der Code in einer Endlosschleife hängt, oder?

Fragen wir doch den TS bzw. geben ihm Zeit zu antworten.

Guten Morgen.

Ja, aus Versehen verklickt. Demnach noch nicht gelöst, leider.

Die Zeile "$(this).val(value_load_txt_p1);" bedeutet, dass hier immer der Wert zurückgeschrieben wird, werden soll.
"this" ist in diesem Moment das "<input value="hier_kommt_der_Wert_hinein">"

Der "Tippfehler" ist beim hineinkopieren hier im Textfeld passiert. Im Original gibt es keine Leerzeile "var rowid1 = rs.rows.item(i).Wert1"
Aber auch mit "Tippfehler = Leerzeile" läuft das ohne Probleme durch..

Ich sehe das Problem an einer anderen Stelle, weiß aber nicht, wie ich es umsetzen soll.
Denn nochmal: Mit dem local Storage klappt es seit Jahren fehlerfrei.

Das Problem sehe ich persönlich in der doppelten Schleife.
Ausschnitt aus Code oben:

 // Hier beginnt Schleife 1
$('input[type="text"]').each(function(){     

Und hier beginnt Abfrage der DB

 // Hier beginnt Schleife 2
	  for (var i = 0; i < len; i++) {  

Hier nochmal zum Verständnis und besseren Überblick der Code, wie er eigentlich logisch sein sollte. Eigentlich.

$('#button_load_profil1').on('click', function(){  
$('input[type="text"]').each(function(){      
 db_gehalt.transaction(function(tx) {
	var value_load_txt_p1 = tx.executeSql('SELECT Wert1 FROM Profil1 where Bezeichnung like "profil1_text_%" ')  
$(this).val(value_load_txt_p1 );
 });
  });
}); 

Klickt man also den Button, rennt die erste Schleife los und soll aus der Tabelle aus jeder Zeile den Wert aus der Spalte "Wert1" nehmen, wenn in der Spalte "Bezeichnung" die Vorgabe "profil1_text%" gegeben ist.
Mache ich es so, passiert nichts.

Erst wenn ich diese zweite Schleife der DB selbst einbaue, macht er die Abfrage. Dann aber rennt sich das Ganze tot.

$('#button_load_profil1').on('click', function(){  
$('input[type="text"]').each(function(){      
var value_load_txt_p1 = db_gehalt.transaction(function(tx) {
	tx.executeSql('SELECT Wert1 FROM Profil1 where Bezeichnung like "profil1_text_%" ', , function(tx, rs) {  
		var len = rs.rows.length;
	  for (var i = 0; i < len; i++) { 
		var rowid1 = rs.rows.item(i). Wert1;
		console.log(rowid1);	}
	});
  });
$(this).val(value_load_txt_p1);
}); 
});

Darum belasse ich es einfach beim local Storage und verwerfe die Idee mit der DB.
In jedem Fall einen schönen Tag.

Zitat von @internet2107:
Die Zeile "$(this).val(value_load_txt_p1);" bedeutet, dass hier immer der Wert zurückgeschrieben wird, werden soll.

Wissen wir.

Ich sehe das Problem an einer anderen Stelle, weiß aber nicht, wie ich es umsetzen soll.
Denn nochmal: Mit dem local Storage klappt es seit Jahren fehlerfrei.

Hat ja auch nichts mit WebSQL zu tun.

Das Problem sehe ich persönlich in der doppelten Schleife.
Ausschnitt aus Code oben:

Hier nochmal zum Verständnis und besseren Überblick der Code, wie er eigentlich logisch sein sollte. Eigentlich.

> $('#button_load_profil1').on('click', function(){  
> $('input[type="text"]').each(function(){      
>  db_gehalt.transaction(function(tx) {
> 	var value_load_txt_p1 = tx.executeSql('SELECT Wert1 FROM Profil1 where Bezeichnung like "profil1_text_%" ')  
> $(this).val(value_load_txt_p1 );
>  });
>   });
> }); 
> 

Ist ja auch logisch denn tx.executeSql gibt ja auch nichts zurück, also ist die Variable value_load_txt_p1 leer!

Nö, hier ein simples Beispiel, das rennt in Chrome testweise einwandfrei:

// db öffnen
var db = window.openDatabase("myDB","1.0","my database",5*1024*1024);  
db.transaction(function(tx){
    // Tabelle erstellen wenn es sie noch nicht gibt
    tx.executeSql("SELECT name from sqlite_master WHERE type='table' AND name='mysettings'",,function(tx,results){  
        if(results.rows.length == 0){
            // Tabelle erstellen
            console.log("Creating table with demo entries.");  
            tx.executeSql("CREATE TABLE mysettings (name,val)");  
            // Demo-Daten erstellen
            tx.executeSql("INSERT INTO mysettings (name,val) VALUES (?,?)",['Setting1','Value1']);  
            tx.executeSql("INSERT INTO mysettings (name,val) VALUES (?,?)",['Setting2','Value2']);  
        }
        console.log("Showing all entries in table mysettings:");  
        tx.executeSql("SELECT * FROM mysettings",,function(tx,results){  
            for (i = 0; i < results.rows.length; i++){
                console.log(results.rows.item(i).name + " : " + results.rows.item(i).val);  
            }
        });
    });
});

Darum belasse ich es einfach beim local Storage und verwerfe die Idee mit der DB.

Wenn db dann IndexedDB, WebSQL ist tot ...

Gruß A.

p.s. Den Status einer Frage kann man zurücksetzen! Lese dazu How can I mark a post as solved?

Status der Frage zurücksetzen
Wurde ein Beitrag aus Versehen als "gelöst" markiert, kann dies durch Klicken auf "Bearbeiten" im Ursprungs-Beitrag, und dann durch Entfernen des Hakens bei "Diese Frage gilt als gelöst" in der rechten Navigation unter Optionen, wieder zurückgenommen werden.

Danke für die Antwort und den Code.
Nur: Was bringt es? Soweit war und bin ich auch und habe es auch schon geschrieben, dass die einfache Abfrage läuft, Ausgabe in die Console.
Dort sehe ich alle Werte. Es bringt aber nichts, weil nichtsdestotrotz nichts in die jeweiligen Felder zurückgeschrieben wird.
Einzig darum geht es.

Nun ja, egal. Ich begrabe das Thema.

Nun du schreibst in deinem zweiten Beispiel ja gar nichts in die Variable value_load_txt_p1 also kann dort dann auch nichts landen und auch nichts im Feld landen.
Und das hier

var value_load_txt_p1 = db_gehalt.transaction(function(tx)

geht ja nun überhaupt nicht weil die Funktion nichts zurückliefert! Du musst die Daten im Callback zuweisen und dort ins Feld schreiben, nicht außerhalb. Bedenke das sind asynchrone Funktionen!

Das berühmte Brett vorm Kopf ...

p.s. Gerade aktuell:
https://www.golem.de/news/datenbank-fehler-in-sqlite-ermoeglichte-codeau ...
Noch ein Grund die Finger davon zu lassen.

German solved Question JavaScript Development

Hotly discussed

Check of ZFW Firewallgleixnerd - 3 Comments

How to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments

WIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 Comments

End of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment