Change the asynchronous jQuery Dialog to be synchronous?

Question

Currently, I\'m working to replace \"alert\'/\"confirm\" with the jquery dialog.

But most of legacy codes is written in some asynchronous way, which make it

Answer 1

No, you can't do anything sync in Javascript (alert is breaking the rules, in fact). Javascript is built with "single threaded, async" in the core.

What you can do, though, is disable functionality of the underlying page (lightbox-like) so no event get triggered from the page until you don't take the dialog action, be it OK or Cancel. Thought this does not help you to get your sync code working. You have to rewrite.

Answer 2

I don't really see why you are opposed to using Jquery callbacks to achieve the behavior in your example. You will definitely have to rewrite some code but something like:

    function f1() { 
    $( "#testdiv" ).dialog({
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog( "close" );
                f2();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                alert('no');
            }
        }
    });
}
function f2() {
      $( "#testdiv2" ).dialog({
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog( "close" );
                f3();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                alert('no');
            }
        }
    });
}
function f3() {
    $( "#testdiv3" ).dialog({
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

    <div id="testdiv" title="Hello"/>
    <div id="testdiv2" title="World"/>
    <div id="testdiv3" title="!"/>

Answer 3

You can use a real modal dialog.

[dialog] is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use. This could be useful to block a user's interaction until they give you a response, or to confirm an action.

https://github.com/GoogleChrome/dialog-polyfill

Answer 4

The short answer is no, you won't be able to keep your code synchronous. Here's why:

• In order for this to be synchronous, the currently executing script would have to wait for the user to provide input, and then continue.
• While there is a currently executing script, the user is unable to interact with the UI. In fact, the UI doesn't even update until after the script is done executing.
• If the script can't continue until the user provides input, and the user can't provide input until the script is finished, the closest you'll ever get is a hung browser.

To illustrate this behavior, debug your code and set a break point on the line following a line that changes the UI:

$("body").css("backgroundColor", "red");
var x = 1;  // break on this line

Notice that your page background is not yet red. It won't change to red until you resume execution and the script finishes executing. You are also unable to click any links in your page while you've got script execution paused with your debugger.

There is an exception to this rule for alert() and confirm(). These are browser controls, and are treated differently than actual web page UI elements.

The good news is that it really shouldn't be very hard to convert your code. Presumably, your code currently looks something like this:

if (confirm("continue?")) {
    // several lines of code if yes
}
else {
    // several lines of code if no
}
// several lines of code finally 

Your asynchronous version could create a function ifConfirm(text, yesFn, noFn, finallyFn) and your code would look very much the same:

ifConfirm("continue?", function () {
    // several lines of code if yes
},
function () {
    // several lines of code if no
},
function () {
    // several lines of code finally 
});

Edit: In response to the additional example you added to your question, unfortunately that code will need to be refactored. It is simply not possible to have synchronous custom confirmation dialogs. To use a custom confirmation dialog in the scenario where an event needs to either continue or cancel, you'll just have to always cancel the event and mimic the event in the yesFn callback.

For example, a link:

$("a[href]").click(function (e) {
    e.preventDefault();
    var link = this.href;
    ifConfirm("Are you sure you want to leave this awesome page?", function () {
        location.href = link;
    });
});

Or, a form:

$("form").submit(function (e) {
    e.preventDefault();
    var form = this;
    ifConfirm("Are you sure you're ready to submit this form?", function () {
        form.submit();
    });
});

Answer 5

I'm not exactly sure what the motivation behind not using callbacks is so it is hard to judge what solution might satisfy your requirements, but another way to delay execution is through jQuery's "deferred" object.

http://api.jquery.com/category/deferred-object/

You could set up a function that opens the jquery dialog and add code that "waits" for dialog to close. This ends up working in a fairly similar way to a callback in the case you've laid out but here is an example:

    function confirm () {
        var defer = $.Deferred(); 
        $('<div>Do you want to continue?</div>').dialog({
                autoOpen: true,
                close: function () { 
                    $(this).dialog('destroy');
                },
                position: ['left', 'top'],
                title: 'Continue?',
                buttons: {
                    "Yes": function() {
                        defer.resolve("yes"); //on Yes click, end deferred state successfully with yes value
                        $( this ).dialog( "close" );
                    },
                    "No": function() {
                        defer.resolve("no"); //on No click end deferred successfully with no value
                        $( this ).dialog( "close" );
                    }
                }
            });
        return defer.promise(); //important to return the deferred promise
    }

    $(document).ready(function () {
        $('#prod_btn').click(function () {
            confirm().then(function (answer) {//then will run if Yes or No is clicked
                alert('run all my code on '  + answer);

            });
        });

    });

Here it is working in jsFiddle: http://jsfiddle.net/FJMuJ/

Answer 6

Here's some ideas - what you actually want is to block your async event to make it look like sync. Here's some links:

Queuing async calls

Mobl

Narrative JavaScript

Hope this helps you further!!