Usa AJAX para poblar la base de datos de Cordova

Luego de la documentación oficial de phonegap / cordova sobre el manejo de bases de datos, implementé el código y me funcionó bien para una sola tabla, obteniendo tipos de datos JSON con callback AJAX.

Mi problema es implementar este método con varias tablas.

Aquí hay un ejemplo de mi código para dos tablas, pero no funciona:

index.html

        

updater.js

 var transactions=[]; var jqxhr=null; function update() { jqxhr = $.ajax( "http://www.example.com/file.php?id=100" ) .done(function(data) { data = JSON.parse(data); $.each(data.elements,function(index, item) { transactions.push("INSERT INTO elements VALUES('"+ item.id + "','"+ item.name + "','"+ item.tel + "','"+ item.mail +"')"); }); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); jqxhr = $.ajax( "http://www.example.com/file.php?id=200" ) .done(function(data) { data = JSON.parse(data); $.each(data.people,function(index, item) { transactions.push("INSERT INTO people VALUES('"+ item.id + "','"+ item.name + "','"+ item.nick + "','"+ item.gender +"')"); }); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); var db = window.openDatabase("Database", "1.0", "Example", 2097152); db.transaction(populateDB, errorCB, successCB); } function populateDB(tx) { tx.executeSql('DROP TABLE IF EXISTS elements'); tx.executeSql('CREATE TABLE IF NOT EXISTS elements (id INTEGER NOT NULL PRIMARY KEY, name TEXT(32), tel TEXT(20), mail TEXT(64))'); tx.executeSql('DROP TABLE IF EXISTS people'); tx.executeSql('CREATE TABLE IF NOT EXISTS people (id INTEGER NOT NULL PRIMARY KEY, name TEXT(32), nick TEXT(20), gender TEXT(10))'); for (var i=0;i<transactions.length;i++) { tx.executeSql(transactions[i]); } } function errorCB(err) { alert("Error processing SQL: "+err.code); } function successCB() { alert("Database updated!"); } 

¿Usted me podría ayudar por favor? ¡Gracias!

De forma predeterminada, todas las solicitudes de $ .ajax se envían de forma asíncrona, así que supongo que el problema es que

 transactions.push("INSERT INTO people... 

Se invoca después de que se escribe en la base de datos.

Puede poner la segunda solicitud al final de la función “finalizada” de la primera solicitud, y escribir en la base de datos al final de la función “finalizada” de la segunda solicitud. Parece bastante feo, incluso si lo divides en varias funciones, pero debería funcionar.

El uso de $ .Deferred mejora un poco la apariencia del código: http://api.jquery.com/category/deferred-object/

La configuración de jQuery.ajax “async” (que puede establecer en “false”) está en desuso desde JQuery 1.8, por lo que no es una buena opción. https://api.jquery.com/jQuery.ajax/

ACTUALIZAR. Código para la primera opción (solo parte importante):

 function update() { jqxhr = $.ajax( "http://www.example.com/file.php?id=100" ) .done(function(data) { data = JSON.parse(data); var elementsCount = data.elements.length; $.each(data.elements,function(index, item) { transactions.push("INSERT INTO elements VALUES('"+ item.id + "','"+ item.name + "','"+ item.tel + "','"+ item.mail +"')"); if (index == elementsCount - 1) //making sure all elements are added to array { updateSecond(); } }); }); } function updateSecond() { jqxhr = $.ajax( "http://www.example.com/file.php?id=200" ) .done(function(data) { data = JSON.parse(data); var elementsCount = data.people.length; $.each(data.people,function(index, item) { transactions.push("INSERT INTO people VALUES('"+ item.id + "','"+ item.name + "','"+ item.nick + "','"+ item.gender +"')"); if (index == elementsCount - 1) //making sure all elements are added to array { dbWrite(); } }); }); } function dbWrite() { var db = window.openDatabase("Database", "1.0", "Example", 2097152); db.transaction(populateDB, errorCB, successCB); } 

El código definitivamente no parece ideal, pero debería funcionar correctamente.