[JavaScript] [Web Database] Async => Sync

Nanobyte · 18. Januar 2011

[Web Database] Async => Sync

Moin,

ich schreibe gerade mit Hilfe von PhoneGap ein Programm für Android in Javascript etz.

Mein Problem ist das Daten vom Server zum App kommen und dann eingetragen werden müssen in die Locale Datanbank.

Leider befindet sich hier das Problem das die SQL Befehle Asyncron Abgearbeitet werden und meine Schleife schneller ist als der Erste Befehl.

Wie kann man das Problem beheben?

(Getestet in Webkit! Wegen Console Befehle )

Hier ein Beispiel in dem das Problem gut sichtbar ist: (Ausgabe unten drunter)

HTML:

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8"/>

 <title>Web Database</title>



 <style type="text/css">

 </style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script type="text/javascript">

 var mydb = openDatabase("webdatabase-test1", "1.0", "Web Database Test1", 200000);

 mydb.transaction
 (
 function(trans)
 {
 trans.executeSql("CREATE TABLE IF NOT EXISTS `test1` ( `id` INTEGER PRIMARY KEY AUTOINCREMENT, `name` varchar(255) DEFAULT '', `wert` TEXT DEFAULT '' ) ;"
 , []
 , null
 , null
 );
 }
 );





 var data = [
 ['Hans 1', 'irgendwas 1']
 , ['Hans 2', 'irgendwas 2']
 , ['Hans 3', 'irgendwas 3']
 , ['Hans 4', 'irgendwas 4']
 , ['Hans 5', 'irgendwas 5']
 , ['Hans 6', 'irgendwas 6']
 , ['Hans 7', 'irgendwas 7']
 , ['Hans 8', 'irgendwas 8']
 ];




 function insert()
 {

 for(var a=0, b=data.length; a<b; ++a)
 {

 var insertData = data[a];

 mydb.transaction
 (
 function(trans)
 {
 trans.executeSql("INSERT INTO `test1` (`name`, `wert`) VALUES (?,?)"
 , insertData
 , function(trans, result)
 {
 console.log('Success');
 }
 , function(trans, error)
 {
 console.log('Error: "' + error.message + '" ('+error.code+')');
 }
 );
 }
 );

 }

 }



 function show()
 {
 mydb.transaction
 (
 function(trans)
 {
 trans.executeSql("SELECT * FROM `test1`"
 , []
 , function(trans, result)
 {
 $('#data').empty();

 for(var a=0, b=result.rows.length; a<b; ++a)
 {
 var row = result.rows.item(a);
 $('<li/>')
 .text(row['id'] + '. ' + row['name'] + ' | ' + row['wert'] )
 .appendTo('#data');
 }
 }
 , function(trans, error)
 {
 console.log('Error: "' + error.message + '" ('+error.code+')');
 }
 );
 }
 );
 }



 $(function(){

 $('#insert').click(insert).attr('disabled', false);
 $('#show').click(show).attr('disabled', false);

 });

 </script>

 </head>



 <body>

 <h1>Web Database</h1>

 <button id="insert" disabled="disabled">Eintragen</button> <button id="show" disabled="disabled">Anzeigen</button>

 <hr />

 <ul id="data"></ul>

 </body>

</html>

Ausgabe:

Code:

1. Hans 8 | irgendwas 8
2. Hans 8 | irgendwas 8
3. Hans 8 | irgendwas 8
4. Hans 8 | irgendwas 8
5. Hans 8 | irgendwas 8
6. Hans 8 | irgendwas 8
7. Hans 8 | irgendwas 8
8. Hans 8 | irgendwas 8

Anzeige

myth_ · 18. Januar 2011

AW: [Web Database] Async => Sync

Hallo Nanobyte,

da du das jQuery Framework verwendest hast du die Möglichkeit relativ einfach "custom events" zu definieren.

http://api.jquery.com/bind/

Runterscrollen bis zu "custom events" dort findest du ein Beispiel.
Das kannst du dann auch hier für dein Problem verwenden.

grüße,

myth_

Nanobyte · 19. Januar 2011

AW: [Web Database] Async => Sync

Vielen Dank myth_ ! BW

Das Problem hat sich Gestern in der "Wartungszeit" des Forums bereits erledigt.
Murdoc hat eine super Lösung für mein (geänderten Problem).

Das Problem war folgendes:
Ankommende Daten über Ajax (Im beispiel einfach ein Array) sollten in eine Datenbank im Client gespeichert werden. Vor der Speicherung sollte geprüft werden Ob der Datensatz bereits vorhanden ist (m-id). Wenn vorhanden dann Updaten, sonst Einfügen.

Hier die Lösung von Murdoc, nochmal besten dank

HTML:

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8"/>

 <title>Web Database</title>



 <style type="text/css">

 </style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script type="text/javascript">

 var mydb = (function() {
 var link = openDatabase("webdatabase-test1", "1.0", "Web Database Test1", 200000),
 wque = [],
 ready = false;
 
 link.transaction(
 function(trans) {
 trans.executeSql("DROP TABLE IF EXISTS `test2`", [], 
 function() {
 trans.executeSql("CREATE TABLE IF NOT EXISTS `test2` ( \
 `id` INTEGER PRIMARY KEY AUTOINCREMENT, \
 `m-id` INTEGER DEFAULT 0, \
 `name` VARCHAR(255) DEFAULT '', \
 `wert` TEXT DEFAULT '');", [], _ready, null);
 }
 );
 }
 );
 
 function _ready() {
 ready = true;
 _dequeue();
 }
 
 function _queue(query, vars, fn, er) {
 wque.push([query, vars, fn, er]);
 }
 
 function _dequeue() {
 for(var i = 0, l = wque.length; i < l; ++i)
 _query(wque[i][0], wque[i][1], wque[i][2], wque[i][3]);
 }
 
 function _query(query, vars, fn, er) {
 if(!fn) fn = null;
 if(!er) er = function(t, e) { alert(e.message); };
 
 if(ready != true) {
 _queue(query, vars, fn, er);
 return;
 }
 
 link.transaction(function(trans) {
 trans.executeSql(query, vars, fn, er);
 });
 }
 
 return { exec: _query };
 })();
 
 var data = [
 {'m-id': 1, 'name': 'Hans 1', 'wert': 'irgendwas 1'}
 , {'m-id': 2, 'name': 'Hans 2', 'wert': 'irgendwas 2'}
 , {'m-id': 3, 'name': 'Hans 3', 'wert': 'irgendwas 3'}
 , {'m-id': 4, 'name': 'Hans 4', 'wert': 'irgendwas 4'}
 , {'m-id': 5, 'name': 'Hans 5', 'wert': 'irgendwas 5'}
 , {'m-id': 6, 'name': 'Hans 6', 'wert': 'irgendwas 6'}
 ];
 
 function insert() {
 for(var i = 0, l = data.length; i < l; ++i)
 check_data(i);
 
 function check_data(index) {
 var mid = data[index]['m-id'],
 name = data[index].name,
 wert = data[index].wert;
 
 mydb.exec("SELECT * FROM `test2` WHERE `m-id` = ?", [mid],
 function(trans, result) {
 if(result.rows.length == 0)
 _insert(mid, name, wert);
 else
 _update(mid, name, wert);
 }
 );
 
 function _insert(mid, name, wert) {
 mydb.exec("INSERT INTO `test2` ( `m-id`, `name`, `wert` ) VALUES ( ?, ?, ? )", 
 [ mid, name, wert ]);
 }
 
 function _update(mid, name, wert) {
 
 }
 }
 }
 
 function show() {
 mydb.exec("SELECT * FROM `test2`", [],
 function(trans, result) {
 $("#data").empty();
 
 for(var i = 0, l = result.rows.length; i < l; ++i) {
 var row = result.rows.item(i);
 $('<li/>').text(row.id + ". " + row.name + " | " + row.wert)
 .appendTo('#data');
 } 
 }
 );
 }

 $(function(){

 $('#insert').click(insert).attr('disabled', false);
 $('#show').click(show).attr('disabled', false);

 });

 </script>

 </head>



 <body>

 <h1>Web Database</h1>

 <button id="insert" disabled="disabled">Eintragen</button> &middot; <button id="show" disabled="disabled">Anzeigen</button>

 <hr />

 <ul id="data"></ul>

 </body>

</html>

Nützliche Suchen

[JavaScript] [Web Database] Async => Sync

Videos zum Themenbereich