| 

.NET C# Java Javascript Exception

0
Ein paar Bemerkungen zu Phonegap’s  ‘deviceready’-Event, $(document).ready und anderen jQuery Mobile Event-Handlern. Situation: Ich habe eine App mit Phonegap und jQuery Mobile erstellt. Die App sollte Cookies setzen und damit unter Umständen ein automatisiertes Login ermöglichen. Ich fand heraus, dass

Ein paar Bemerkungen zu Phonegap’s  ‘deviceready’-Event, $(document).ready und anderen jQuery Mobile Event-Handlern.

Situation: Ich habe eine App mit Phonegap und jQuery Mobile erstellt. Die App sollte Cookies setzen und damit unter Umständen ein automatisiertes Login ermöglichen. Ich fand heraus, dass die Cookies zwar gesetzt wurden, aber dennoch nach einem Neustart der App nicht mehr zur Verfügung standen.

Obwohl kein unmittelbarer Zusammenhang erkennbar war, wollte ich ausschließen können, dass die Ursache des Fehlers darin lag, dass entweder Phonegap oder das DOM noch nicht vollständig geladen waren. Und so habe ich mich etwas intensiver damit beschäftigt.

Phonegap meldet sich, wenn es komplett geladen ist, über das Event ‘deviceready’. Also kann man sich über einen Event-Listener informieren lassen, wann’s denn soweit ist:

// event listener
function init() {
 document.addEventListener("deviceready", deviceInfo, true);  
}

Die Funktion ‘init’ wird in meinem Beispiel vom body-Tag der HTML-Seite aufgerufen:

<body onload="init();">

Nach Abfeuern der deviceready-Events wird die Callback-Funktion ‘deviceInfo’ aufgerufen. In ihr habe ich über ‘alert’ die Meldung ausgegeben, dass Phonegap nun zur Verfügung steht:

var deviceInfo = function() {
 alert('phonegap ready');
}

Desweiteren habe ich die folgende Funktion getestet:

$(document).ready(function() {    
 alert('dom ready');
});

Sie teilt mit, wann das DOM komplett geladen wurde.

Und als Letztes habe ich noch einen jQuery Mobile Event benutzt: ‘pagebeforeshow’. Dieser Event wird, wie der Name schon sagt, abgefeuert, bevor eine Seite in JQM angezeigt wird. Im folgenden Beispiel wird eine Funktion aufgerufen, bevor die JQM-Seite ‘#login’ angezeigt wird.

$('#login').live("pagebeforeshow", function() {
  alert ('pagebeforeshow');
});

Die Events wurden in der folgenden Reihenfolge angezeigt:

  1. pagebeforeshow
  2. dom ready
  3. phonegap ready

Ich kann nicht sagen, ob diese Reihenfolge in jedem Fall so auftritt. Tatsache ist, dass es bei meiner App so war. Und daraus ergibt sich z.B. folgendes:

Annahme 1: Ich habe über Phonegap eine Datenbank angelegt und darin meine Login-Daten gespeichert. Annahme 2: Ich möchte, wenn die Login-Seite geladen wird, diese Datenbak abfragen und ein automatisiertes Login durchführen, falls Login-Daten darin enthalten sind.

Wenn ich nun in der der Funktion, die beim Laden der Seite aufgerufen wird, den Zugriff auf die DB ausführen will, wird das scheitern,  da Phonegap noch nicht vollständig geladen ist und die Datenbank-Funktionen somit noch nicht zur Verfügung stehen. Dumm gelaufen.

Was kann man da tun? Sicherlich gibt es auch hier wieder mehrere Lösungsansätze. Ein Ansatz wäre, eine zeitgesteuerte Schleife einzubauen, die dann aktiv wird, wenn Phonegap noch nicht geladen ist, und die dann abbricht, wenn Phonegap geladen ist. Also so etwas in der Art:

if (!checkReady()) {
 // not loaded. create time loop that checks again
 var timeloop = window.setInterval(
 function() {
 if (checkReady()) {
 // cancel time loop
 window.clearInterval(timeloop);
 // do something with DB
 }
 }
 ,1000
 );
} else {
 // do something with DB
}

Wobei ‘checkready()’ eine Funktion wäre, die überprüft, ob Phonegap und DOM geladen sind.

Happy Coding,
Rolf Dohrmann

javascript uncategorized jquery-mobile phonegap
Weitere News:
Schreibe einen Kommentar:
Themen:
phonegap jquery-mobile uncategorized javascript
Entweder einloggen... ...oder ohne Wartezeit registrieren
Benutzername
Passwort
Passwort wiederholen
E-Mail