Don't return results until jQuery dialogbox closes?

Question

I am trying to return results based on jQuery dialog selection. I kept alert msg before sending return statement. How to hold results to return until I do something in dialog box? value will be 'true' or 'false'

        function ConfirmDone() {
            var results;
            $('<div></div>').appendTo('body')
               .html('<div><h6>Are you sure you want to lose unsaved changes?</h6></div>')
               .dialog({
                   modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                   width: 'auto', resizable: false,
                   buttons: {
                       Yes: function () {
                           $(this).dialog("close");
                           results=true;
                       },
                       No: function () {
                           $(this).dialog("close");
                           results=false;
                       }
                   },
                   close: function (event, ui) {
                       $(this).remove();
                       results = false;
                   }
               });
            alert(results); //This is calling same when dialog shows up
            return results;

        }

Whats wrong here?

update:

I am not sure. call back function can apply to my code? As @Barmar mentioned in duplicate post

update

@Ajax.ActionLink(
    new { CommunicationLocation = commemail.Location,  CommunicationType = "email" },
            new AjaxOptions()
             {
                 HttpMethod = "Post",
                 UpdateTargetId = "DivEmailContainer",
                 InsertionMode = InsertionMode.Replace,
                 OnBegin = "return ConfirmDone(function(success) {alert('You said: ' + (success ? 'Yes' : 'No'))});"
               },
               new { @class = "linkbutton" })
               }

     $(document).ready(function () {
                $("#deletedialog").dialog({
                    autoOpen: false,
                    modal: true
                });
            });
            function ConfirmDone(callback) {
                 $("#deletedialog").dialog({
                     buttons: {
                         "Delete":{ text: "Delete",
                                    class: "btn btn-success",
                                    click: function () {
                                        $(this).dialog("close");
                                        callback(true);
                                    }
                         },
                         "Cancel": {
                             text: "Cancel",
                             class: "linkbutton",
                             click: function () {
                                $(this).dialog("close");
                                callback(false);
                            }
                        }
                     }
                 });


         $("#deletedialog").dialog("open");

@Barmar, I am not understanding that duplicate post will apply to my code? I am confused. — James123, May 06 '15 at 21:28
Sorry, it was a poor choice for duplicate, because it's using a different plugin. But the general idea is that the dialog is asynchronous. Your `ComfirmDone` function should take a callback argument, and call it in the `close:` function. — Barmar, May 06 '15 at 21:31
Maybe one of the questions in this search will help: http://stackoverflow.com/search?q=%5Bjquery%5D+wait+for+dialog+response — Barmar, May 06 '15 at 22:15

score 2 · Answer 1 · answered May 06 '15 at 21:34

2

Dialogs are asynchronous. You need to pass a callback function:

    function ConfirmDone(callback) {
        var results;
        $('<div></div>').appendTo('body')
           .html('<div><h6>Are you sure you want to lose unsaved changes?</h6></div>')
           .dialog({
               modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
               width: 'auto', resizable: false,
               buttons: {
                   Yes: function () {
                       $(this).dialog("close");
                       callback(true);
                   },
                   No: function () {
                       $(this).dialog("close");
                       callback(false);
                   }
               },
               close: function (event, ui) {
                   $(this).remove();
                   callback(false);
               }
           });
    }

You can then do:

ConfirmDone(function(success) {
    alert("You said: " + (success ? "Yes" : "No"));
});

answered May 06 '15 at 21:34

Barmar

741,623
53
500
612

Do I need to return value from `ConfirmDone(function(success) { }` method? – James123 May 06 '15 at 21:40
No, you don't. The callback is run asynchronously, it doesn't wait for the user to respond to the dialog. You can't wait for user interaction in Javascript, you just provide functions that run when the user does something. – Barmar May 06 '15 at 21:42
But I am calling like this `new AjaxOptions() { ... OnBegin = "return ConfirmDone()" }, – James123 May 06 '15 at 21:47
You can't do that. Everything has to be done using callbacks. – Barmar May 06 '15 at 21:48
My `OnBegin ` is expect results back. Pls check updated post. I do like that but doesn't work. – James123 May 06 '15 at 21:51
You can't write a function that returns the response from a dialog, because it happens asynchronously. You have to refactor everything to account for this. – Barmar May 06 '15 at 21:56
Either that, or use the built-in `confirm()` function. It blocks the script until the user answers. – Barmar May 06 '15 at 21:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77130/discussion-between-james123-and-barmar). – James123 May 06 '15 at 22:04
Sorry, I have to go now. – Barmar May 06 '15 at 22:05

Don't return results until jQuery dialogbox closes?

update:

update

1 Answers1