Wrapping webSql executeSql calls in jQuery Pending / Promises

Question

The html5 specification for executeSql includes a successful callback and a fail callback:

db.transaction(function(tx) { tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?', [ selectedCategory ], function (tx, rs) { displayMyResult(rs); }, function (tx, err) { displayMyError(err); } ); }); 

If I used jQuery, is there a way to implement this using the new jQuery promise / deferred fervor?

Answer 1

I just wanted to add another example.

 (function () { // size the database to 3mb. var dbSize = 3 * 1024 * 1024, myDb = window.openDatabase('myDb', '1.0', 'My Database', dbSize); function runQuery() { return $.Deferred(function (d) { myDb.transaction(function (tx) { tx.executeSql("select ? as Name", ['Josh'], successWrapper(d), failureWrapper(d)); }); }); }; function successWrapper(d) { return (function (tx, data) { d.resolve(data) }) }; function failureWrapper(d) { return (function (tx, error) { d.reject(error) }) }; $.when(runQuery()).done(function (dta) { alert('Hello ' + dta.rows.item(0).Name + '!'); }).fail(function (err) { alert('An error has occured.'); console.log(err); }); })() 

Answer 2

Stumbled upon this question while looking for something else, but I think I have template code that will make you start wrapping webSql queries in jQuery Promises.

This is a sample sqlProviderBase to $.extend on your own provider. I have an example with taskProvider and a page that is called on taskProvider on the show page event. This is pretty rare, but I hope this helps others in the right direction wrap their requests in the promise of better governance.

 var sqlProviderBase = { _executeSql: function (sql, parms) { parms = parms || []; var def = new $.Deferred(); // TODO: Write your own getDb(), see http://www.html5rocks.com/en/tutorials/webdatabase/todo/ var db = getDb(); db.transaction(function (tx) { tx.executeSql(sql, parms, // On Success function (itx, results) { // Resolve with the results and the transaction. def.resolve(results, itx); }, // On Error function (etx, err) { // Reject with the error and the transaction. def.reject(err, etx); }); }); return def.promise(); } }; var taskProvider = $.extend({}, sqlProviderBase, { getAllTasks: function() { return this._executeQuery("select * from Tasks"); } }); var pageThatGetsTasks = { show: function() { taskProvider.getAllTasks() .then(function(tasksResult) { for(var i = 0; i < tasksResult.rows.length; i++) { var task = tasksResult.rows.item(i); // TODO: Do some crazy stuff with the task... renderTask(task.Id, task.Description, task.IsComplete); } }, function(err, etx) { alert("Show me your error'd face: ;-[ "); }); } }; 

Answer 3

I was waiting for an answer, but nothing so far, so I will take a picture. I cannot run this, so I apologize for any errors.

You are looking for something like:

 function deferredTransaction(db,transaction,transactionFunction(transaction)) { me=this; return $.Deferred(function(deferedObject){ db.transaction(transactionFunction(transaction), function(tx,rs) { me.resolve(tx,rs); }, function(tx,err) { me.reject(tx,err); } ); }).promise(); } dtx=deferredTransaction(db,tx,function(tx) { tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?', [ selectedCategory ]); dtx.then(function (tx, rs) { displayMyResult(rs); }, function (tx, err) { displayMyError(err); } ); 

Answer 4

I believe that transferring a deferred transaction to a function and returning a promise creates a purely promising and reusable implementation of the deferral / promise template.

 var selectCategory = function() { var $d = $.Deferred(); db.transaction( function(tx) { tx.executeSql( "SELECT * FROM MyTable WHERE CategoryField = ?" , [selectedCategory] , success , error ) } ); function success(tx, rs) { $d.resolve(rs); } function error(tx, error) { $d.reject(error); } return $d.promise(); }; selectCategory() .done(function(rs){ displayMyResult(rs); }) .fail(function(err){ displayMyError(err); });