Custom JS Confirm Modals using jQuery.Deferred and

Question

I'm a java developer who has somewhat recently entered the Javascript world, so forgive me if I make some silly mistakes or assumptions. I am attempting to translate our native browser/js "Confirm" dialog boxes to custom modals that have been developed using primarily the backbone framework. Currently, these modals do not support "confirm" type functionality. I think the primary issue is that my modals are not currently working asynchronously.

I have a method that I am calling that opens a modal, and I am hoping to receive a "true" or "false" value back from the call which depends on which button the user clicked. However, currently my method returns as soon as the modal is displayed, and does not wait for a button click. The modal system supports seperate callbacks for each button, which can be defined when calling the "openPortletModal" method, as I will demonstrate below. However, the "confirmDiscard" method returns an undefined value, without ever waiting for any of the button calls. My question is, is it possible to pause execution of a method until a callback is made?

While researching, I did find out a bit about jQuery.Deferred,but I haven't found a clear way of utilizing it to get the functionality I want, and no examples I see seem to include different return values based on callbacks.

Here's my sample code:

confirmDiscard: function(context) {
    var deferred = new $.Deferred();

    MyModal.openPortletModal(context, null, {
    views: [{
        name: "auth",
        title: "Confirmation",   
        renderResponseData: "This is a test",  //Message that modal renders
        buttons: [{
        type: "FINISH",
        label: "OK",
        click: function() {
            console.log("CLICKED OK");
            deferred.resolve("true");  //this is ultimately what I'd like to return from the confirmDialog() method
            return false; //Modal system expects a "false" value from callback if there is no AJAX call to be made.
        },
        }, {
        type: "CANCEL",
        click: function() {
            console.log("CLICKED CANCEL");
            deferred.resolve("false");  
            return false;
        },
        }]
    }]
    });

    deferred.done(function(value) {             
    alert(value);  //This does get called on button click, but by now the confirmDiscard method has already returned.
    return value;
    })

    return deferred.promise();
},

Given this pattern, is there a way in javascript to have this method wait while the modal is responded to?

Answer 1

I advise you a way like yours, but a little different. I hope it help you.

cutomConfirm: function(text) {
    var d, rendered, template,
    _this = this;

    template = $('#custom_confirm_temp');
    rendered = $.tmpl($(template).template(), {
        text: text || ''
    });

    $.blockUI({
        message: rendered,
        showOverlay: true,
        onUnblock: function() {
            return $(document).unbind('click');
        },
        css: {
          width: '600px',
          height: '150px',
          opacity: '1',
          border: '0',
          backgroundColor: 'none'
        }
    });

    d = $.Deferred();

    rendered.find('#OK').click(function() {
        $.unblockUI();
        return d.resolve();
    });

    rendered.find('#CANCEL').click(function() {
        $.unblockUI();
        return d.reject();
    });

    return d;
}

You need to create your template(with id ="custom_confirm_temp" ) and call when you need.