Jquery : control function flow with deferred

Question

Apologies but I seem to be going round in circles.

The process is fairly staightforward

1. SaveButtonClicked

2. call function to perform offline db transaction to update a record

3. check if online ( /*used the Ed Norton example for doing this */ )

4. if online call select transaction to fetch all updated records

5. success of select load results into an array

6. call webservice with array

so far I've tried to control the flow with $.Deferred, dothis = defer.pipe(...), .queue [but these seem to based on an element rather than a function completing] , putting the functions into an array ,

in testing the console always writes the 'array built' before the 'building array'

var arrvals = [];
var deferA , deferB;
function updatedb(params){
    db.transaction('update....',[params],updateOk,updateFail)
}
function updateOk(){
    deferA.resolve()
}
function updateFail(){
    deferA.reject()
}
function areweonline(){
    $.ajax(.....) 
}
function selectrows(){
    db.transaction('update....',[params],buildarray,selectFail)
}
function buildarray(transaction,results){
    console.log('building array')
    for(i=0;i<=results.rows.length;i++){
        var row = results.rows.item(i);
        var job = {};
        job.text = row["testtext"]
        arrvals.push(job);
    }
    deferB.resolve()
}
function selectFail(){
    deferB.reject();
}
function callwebservice(vals){
    $.ajax(....) /* this bit is working fine*/
}
function SaveButtonClicked(){
    deferA = $.Deferred(); 
    deferB = $.Deferred();
    $.when(deferA).then(
        console.log('update completed')
        $.when(deferB).then(function(){
            console.log('array built')
            callwebservice(arrvals)
        })
    )
}

So what would be the best approach? $.Deffered, queue, callback ...dark magic?

Answer 1

try in this way

function updatedb(params) {
    var deferA     = $.Deferred(),
        updateOk   = function() { deferA.resolve(); },
        updateFail = function() { deferA.reject(); }

    db.transaction('update....',[params],updateOk,updateFail);
    return deferA.promise();
}


function selectrows() {

    var arrvals = [];

    var deferB     = $.Deferred(),
        buildarray = function (transaction, results) {
            console.log('building array')
            for(i = 0; i <= results.rows.length; i++){
                var row = results.rows.item(i);
                var job = {};
                job.text = row["testtext"]
                arrvals.push();
            }
            deferB.resolve(arrvals);
        },
        selectFail = function() {
            deferB.reject();
        };

    db.transaction('update....',[params],buildarray,selectFail);
    return deferB.promise();
}


function callwebservice(vals) { $.ajax(....) /* this bit is working fine*/ }


function SaveButtonClicked(){

    $.when(updatedb('your params here')).then(
        console.log('update completed')
        $.when(selectrows()).then(function(arr){
            console.log('array built');
            callwebservice(arr)
        })
    )
}

Some thoughts

• You have an empty push() on selectrows function (I think it's not what you want, because arrvals is empty);
• I refactored your code to use less global variables/function: deferred objects are now declared inside functions that return a promise;
• arrvals is now defined in selectrows() function, and you can pass it when you resolve the deferred task;
• areweonline() function was removed from my example (since you're not using it anywhere in your snippet);
• when() are now looking for promises (and not for deferred).

Note: I didn't tried to execute the code, but hope this helps anyway