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);
            }
        }
    }
  });
}

Answer 1

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'
    });
}