Uploading indexedDB data to PHP in a loop - php

Question

I am trying to use indexedDB to store offline data, and then upload the data when connected. In the following code a loop is used to read the data from indexedDB, and for each record (object) in the table (store), a JSON object is created and posted to a PHP file. However, this indexedDB loop only executes once. Is this because the JSON object was sent to server asynchronously?
var trans = LocalDB.indexedDB.db.transaction(storename,
IDBTransaction.READ_WRITE);
var store = trans.objectStore(storename);
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function (e) {
var result = e.target.result;
var obj = new Object;
obj.name = result.value.Name;
obj.Date = result.value.Date;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
alert(xmlhttp.responseText);//problem: only shown once
result.continue();
}
};
xmlhttp.open("POST", "upload.php");
xmlhttp.setRequestHeader("Content-type", "application/json", true);
xmlhttp.send(JSON.stringify(obj));
};
cursorRequest.onerror = function (e) { alert("Error uploading"); };

Answer 1

If you check your Console for errors, you'll probably see an:
Uncaught Error: TransactionInactiveError
This does seem to be due to the Ajax request delaying the result.continue(). In the meantime, the transaction apparently becomes inactive and can no longer be used by the cursor.
You'll want to move the result.continue() out of the onreadystatechange:
// ...
xmlhttp.send(JSON.stringify(obj));
result.continue();
You could also opt for Sjax (synchronous). But, that's not generally recommended.
Also, note that the onsuccess callback will be called an additional time with a null result to signify the cursor has completed, so you'll want to test for this:
cursorRequest.onsuccess = function (e) {
var result = e.target.result;
if (!result) {
console.log('Done');
return; // exit callback
}
// ...
};
You could also use this to send the entire collection in an Array with a single Ajax request:
var storedCollection = [];
cursorResult.onsuccess = function (e) {
var result = e.target.result;
if (result) {
storedCollection.push(result.value);
result.continue();
return; // exit callback
}
// else: the cursor is "done"
var xmlhttp = new XMLHttpRequest();
// ...
xml.send(JSON.stringify(storedCollection));
};
Example: http://jsfiddle.net/CZBrd/ (check Console)