Question

I get a error when trying out the following code in Chrome:

var db = openDatabase('foo', 1, 'foo', 1111);

var sql = function(callback){
    db.transaction(function(tx){
        callback(tx.executeSql);
    });
};

sql(function(query){
  // Dose 1 or more querys in same transaction
  query('CREATE TABLE IF NOT EXISTS DEMO1 (id unique, data)');
  query('CREATE TABLE IF NOT EXISTS DEMO2 (id unique, data)');
});

Sasy: Uncaught TypeError: Illegal invocation

And I don’t really know what that means.

This code however works just fine:

var db = openDatabase('foo', 1, 'foo', 1111);

var sql = function(callback){
    db.transaction(function(tx){
        callback(tx);
    });
};

sql(function(query){
  // Dose 1 or more querys in same transaction
  query.executeSql('CREATE TABLE IF NOT EXISTS DEMO1 (id unique, data)');
  query.executeSql('CREATE TABLE IF NOT EXISTS DEMO2 (id unique, data)');
});

Have you any idea how I can make the first solution works? I want to make it as simple as possible and also within the same transaction.

Answer 1

It’s the case for several host objects in Chrome. .bind should work in those cases:

callback(tx.executeSql.bind(tx));

The point is that the reference to tx is lost (the this value used internally). You’re passing the “generic” function of SQLTransaction‘s prototype without the information that it should be called on tx. .bind, however, binds the this value correctly, even if you don’t call it like obj.func() but as a “bare” function call.