Using jQuery deferred promises

Question

So I am very new to these Promises. I am having a hard time wrapping my head around them. I have looked over plenty of tuts and SO posts, but haven't come across anything like my situation. Here is my current code.

$("#PayNow, input[name^='schedulepmt']").on("blur", function(){
 var diff = 0;
 diff = calcBalanceDue();
 if(diff){
    $.when(confirmNewPayment(diff)).then(function(){
        if($(this).attr("id") === "PayNow" && input[name^='schedulepmt'].length && ($(this).val() !== $(this).data("prevValue"))){
            if(!resetPmtInfo()) {
                $(this).val($(this).data("prevValue"));
            }
        }
    });
  }
});

I would like the code inside the .then() to execute after confirmNewPayment() has executed. It seems to be still all running async.

Thanks.

Here is confirmNewPayment()

function confirmNewPayment(diff){
bootbox.dialog({
    message: "There is an outstanding balance. How would you like to proceed?",
    title: "Outstanding Balance Options",
    closeButton: false,
    buttons: {
        addpmt: {
            label: "Add a scheduled CC payment",
            className: "btn-success",
            callback: function() {
                scheduledPmtData.PaymentCount += 1;
                $("#ScheduledPayments").append($("#ScheduledPmtTemplate").render(scheduledPmtData,{amount:diff}));
            }
        },
        collect: {
            label: "Mark balance as \"To Collect\"",
            className: "btn-primary",
            callback: function() {
                $("#BalanceDueRow").removeClass("hide");
                $("#BalanceDue").val(diff);
            }
        }
    }
  });
}

What does confirmNewPayment look like? Why are you calling $.when on it? Does it return a promise? — gen_Eric
– gen_Eric, Commented Oct 8, 2014 at 19:52
That's why this isn't working as you expect. Why do you want to use a promise here? What part of confirmNewPayment is async? When do you want the .then to run? After the dialog opens? After a button is clicked? — gen_Eric
– gen_Eric, Commented Oct 8, 2014 at 19:56

madpoet · Accepted Answer · 2014-10-08 20:08:40Z

2

Your confirmNewPayment function should return a promise:

function confirmNewPayment(diff){
    var deferred = $.Deferred();

    // Your async action here
    (function() {
        // $when will run your function when the deferred object is resolved
        deferred.resolve(diff * 2);
    })();

    return deferred.promise();
}

For the update:

Everything would be easier if bootbox was returning a promise by design. So in this case you could do

function confirmNewPayment(diff){
    var deferred = $.Deferred();

    bootbox.dialog({
        message: "There is an outstanding balance. How would you like to proceed?",
        title: "Outstanding Balance Options",
        closeButton: false,
        buttons: {
            addpmt: {
                label: "Add a scheduled CC payment",
                className: "btn-success",
                callback: function() {
                    scheduledPmtData.PaymentCount += 1;
                    $("#ScheduledPayments").append($("#ScheduledPmtTemplate").render(scheduledPmtData,{amount:diff}));

                    deferred.resolve('schedule');
                }
            },
            collect: {
                label: "Mark balance as \"To Collect\"",
                className: "btn-primary",
                callback: function() {
                    $("#BalanceDueRow").removeClass("hide");
                    $("#BalanceDue").val(diff);

                    deferred.resolve('mark');
                }
            }
        }
    });

    return deferred.promise();
}

...

$("#PayNow, input[name^='schedulepmt']").on("blur", function(){
    ....
    confirmNewPayment(diff).then(function(selection) {
        // selection is 'schedule' or 'mark'
    });
}

edited Oct 8, 2014 at 20:08

answered Oct 8, 2014 at 19:57

madpoet

1,0631 gold badge11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gen_Eric Over a year ago

You don't need $.when for this. You can just do confirmNewPayment(diff).then(function(){ });

dbinott Over a year ago

my code should go before the (function(){ or inside it?

dbinott Over a year ago

Understanding it better now, although it is not working as intended, I think it is because I need another Promise inside resetPmtInfo() which also has a bootbox.

Collectives™ on Stack Overflow

Using jQuery deferred promises

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related