jQuery Deferred with jQueryUI/Bootstrap dialogs

Question

I have been working on a solution for displaying a conformation dialog for a form submit.

Basicly I wanted to replace the built-in confirm() function with myown, so I could write my form as <form onsubmit="customConfirm()"></form>. I thourght I could use promises for this, so I could prevent the form from submitting, display the dialog, return a promise and then resolve or reject that promise upon click of the the OK and Cancel buttons.

The problem is that my deferred object seems to be ignored, both the done and fail functions are called - I have created a little jsFiddle that shows what I am talking about.

I must say I haven't worked with promises a lot so maybe I am doing something wrong.

Answer 1

The answer from @Halcyon lead me to find the answer.

I needed to wrap my done and fail function calls inside annoynomous functions.

    var name = "Billy";
    var dfd = confirmDialog();
    $.when(
        dfd
    ).then(function() {
            alert('Hello there ' + name)
           },function() {
            alert('Goodbye ' + name)
    });

Updated jsFiddle

Answer 2

I'm not really sure what you intend but this works just fine: http://jsfiddle.net/vvhttp4x/1/

var dfd = confirmDialog();
dfd.done(function () {
    alert("done");
});
dfd.fail(function () {
    alert("fail");
});

It's a promise so if you do dfd.state() right away you'll always get pending.

You should continue your code in the done or fail handler.