Question

86

Success handling in custom javascript function

rated 0 times [ 92] [ 6] / answers: 1 / hits: 15323 / 12 Years ago, tue, june 19, 2012, 12:00:00

If I make an ajax call, I can add success handling. I want to add similar logic to my custom functions.

I have 6-10 custom functions that MUST be run sequentially or independently. They don't typically run independently so I have them daisy-chained now by calling the next function at the end of the previous but that is messy to read and does not allow for separate execution.

I would love to have something like this:

function runall(){

    runfirst().success(

        runsecond().success(

            runthird()

    ))

}

I have had other situations were I would like to add .success() handling to a custom function, but this situation made it more important.

If there is another way to force 6-10 functions to run synchronously, that could solve this problem, but I would also like to know how to add success handling to my custom functions.

I tried the following based on @lanzz's suggestion:

I added .then() to my function(s):

$bomImport.updateGridRow(rowId).then(function () {

        $bomImport.toggleSubGrid(rowId, false);

});





var $bomImport = {

  updateGridRow: function (rowId) {

    $('#' + rowId + ' td[aria-describedby="bomImport_rev"]').html($("#mxRevTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_itemno"]').html($("#itemNoTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_used"]').html($("#usedTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_partSource"]').html($("#partSourceTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_partClass"]').html($("#partClassTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_partType"]').html($("#partTypeTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_partno"]').html($("#mxPnTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_descript"]').html($("#descTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_qty"]').html($("#qtyTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_custPartNo"]').html($("#custPartNoTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_crev"]').html($("#custRevTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_u_of_m"]').html($("#uomTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_warehouse"]').html($("#warehouseTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_standardCost"]').html($("#stdCostTxt").val());

    $('#' + rowId + ' td[aria-describedby="bomImport_workCenter"]').html($("#wcTxt").val());

    var defferred = new $.Deferred();

    return defferred.promise();

}};

The code correctly goes to the end of updateGridRow, gives no errors, but never gets back to call the second function.

I also tried the following as was suggested @Anand:

workSheetSaveExit(rowId, isNew).save().updateRow().toggle();

function workSheetSaveExit(){

    this.queue = new Queue;

    var self = this;

    self.queue.flush(this);

}

workSheetSaveExit.prototype = {

  save: function () {

    this.queue.add(function (self) {

        $bomImport.workSheetSave(rowId, isNew);

    });

    return this;

  },

  updateRow: function () {

    this.queue.add(function (self) {

        $bomImport.updateGridRow(rowId);

    });

    return this;

  },

  toggle: function () {

    this.queue.add(function (self) {

        $bomImport.toggleSubGrid(rowId, false);

    });

    return this;

  }

};

Which didn't work.

Final Solution

For a great explanation of how to use deferred and make this work see here:
Using Deferred in jQuery

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carterf

Add To Favorites

Follow

Total Points: 255

Total Questions: 93

Total Answers: 122

Location: Marshall Islands

Member since Wed, Jun 17, 2020

4 Years ago

answered 12 Years ago stefanicarolinat · Accepted Answer

How to use Deferreds:

function somethingAsynchronous() {

    var deferred = new $.Deferred();

    // now, delay the resolution of the deferred:

    setTimeout(function() {

        deferred.resolve('foobar');

    }, 2000);

    return deferred.promise();

}



somethingAsynchronous().then(function(result) {

    // result is foobar, as provided by deferred.resolve() in somethingAsynchronous()

    alert('after somethingAsynchronous(): ' + result);

});



// or, you can also use $.when() to wait on multiple deferreds:

$.when(somethingAsynchronous(), $.ajax({ something })).then(function() {

    alert('after BOTH somethingAsynchronous() and $.ajax()');

});

If your functions simply make an AJAX request, you can just return the actual promise returned by $.ajax():

function doAjax() {

    return $.ajax({ /* ajax options */ });

}



doAjax().then(function() {

    alert('after doAjax()');

});