I have a big problem. I know it's about callback, closure but I don't know how to solve the problem. Here is my code

$.Model.extend('Article',
{
     findAll : function(params, success, error){                
                var result = []
                db.transaction(function(tx) {
                    tx.executeSql('select * from contents', [],function(tx, rs) {
                        for(var i=0; i<rs.rows.length; i++) {
                            var row = rs.rows.item(i)
                            result[i] = {
                                id: row['id'],
                                title: row['title'],
                                body: row['body']
                            }
                        }
                    })
                })
                //here result is undefined
                alert(result)
                return result
    }
})
//undefined
var view = Article.findAll

I know that executeSql is asynchronous function, but I don't know how to save and return result of executeSql. I use javascript mvc and HTML offline database.

Thank you for your help

I have a big problem. I know it's about callback, closure but I don't know how to solve the problem. Here is my code

$.Model.extend('Article',
{
     findAll : function(params, success, error){                
                var result = []
                db.transaction(function(tx) {
                    tx.executeSql('select * from contents', [],function(tx, rs) {
                        for(var i=0; i<rs.rows.length; i++) {
                            var row = rs.rows.item(i)
                            result[i] = {
                                id: row['id'],
                                title: row['title'],
                                body: row['body']
                            }
                        }
                    })
                })
                //here result is undefined
                alert(result)
                return result
    }
})
//undefined
var view = Article.findAll

I know that executeSql is asynchronous function, but I don't know how to save and return result of executeSql. I use javascript mvc and HTML offline database.

Thank you for your help

• javascript
• html
• callback
• closures

• I Google'd "Javascript MVC" and found the library, but can't find anything in the JavaScript MVC docs about 'executeSql'. If you have docs handy, you should check to see if there is a way to make the tx.executeSql method run synchronously instead of asynchronous. – mrvisser Commented Dec 13, 2009 at 23:42
• I know there is also synchronous method for executeSql, but safari and other webkit based browsers support only asynchronous. Code below works perfectly, thank you guys – Tibor Commented Dec 14, 2009 at 9:51
• 2 Works perfectly? One might almost say, it was the "answer" ? ;) – mrvisser Commented Dec 16, 2009 at 20:22
• The synchronous API only applies (in the spec) to web workers, not the window object, so that's not a possibility. dev.w3/html5/webdatabase/#databases – Grumdrig Commented Jul 20, 2010 at 4:55

4 Answers 4

The W3C web database spec talks about support for both Asynchronous and Synchronous database operations. (See 4.3 and 4.4)

If you can't use a synchronous implementation, then you might want to consider approaching the problem like this instead:

$.Model.extend('Article',
{
     findAll : function(params, success, error){                
                var result = []
                db.transaction(function(tx) {
                    tx.executeSql('select * from contents', [],function(tx, rs) {
                        for(var i=0; i<rs.rows.length; i++) {
                            var row = rs.rows.item(i)
                            result[i] = {
                                id: row['id'],
                                title: row['title'],
                                body: row['body']
                            }
                        }

                        success(result); //toss the result into the 'success' callback
                    })
                })
                //here result is undefined
                alert(result)
                return result
    }
})

Article.findAll([], function(view) {
        //...
    }, function() {
        //error occured
    });

I have the same issues, but you might want to use this little wrapper library that makes life easier ;)

http://github./grosser/arjs

I had the same problem, especially on mobile development projects. I created a library that eliminates the need for callbacks: http://code.google./p/proto-q/

This made my code easier to troubleshoot, maintain, and enhance.

I added support for AJAX, web workers, script injection, and the storage APIs. I hope it helps.

Your trying to use the result synchronously, that is your accessing result before its defined (actually in your code example its not undefined, its an empty array) though I expect thats because you had moved the declaration from its original position trying to figure out what was happening.

Try this modified example:-

$.Model.extend('Article',
{
    findAll : function(params, success, error){                
            db.transaction(function(tx) {
                tx.executeSql('select * from contents', [], function(tx, rs) {
                    var result = [];
                    for(var i=0; i<rs.rows.length; i++) {
                        var row = rs.rows.item(i)
                        result.push({
                            id: row['id'],
                            title: row['title'],
                            body: row['body']
                        });
                    }
                    success(result);
                });
            });
    }
});

Article.findAll({}, function(result) { 
    // process result here
});

Article.findAll() is now an asynchronous function, and its callback (closure) receives the results.