Wait for popup result on link click before executing
<p>I am working on an ASP.NET MVC project and I would like all links with an attribute <code>data-confirmation</code> to display a custom confirm box before executing.<br>
Those links can be <code>ajax</code> links with different <code>data-ajax-success</code> attributes like this one:</p>

<pre><code>&lt;a data-ajax="true" data-ajax-failure="OnAjaxError" data-ajax-method="POST" data-ajax-success="OnAjaxSuccess(data, "updatePanel")" href="/Controller/Action/2cda26be-e6d9-416b-ae5a-ec85280fb1da"&gt;&lt;/a&gt;
</code></pre>

<p>Or simple links like this one:</p>

<pre><code>&lt;a href="/OtherController/OtherAction/3ebdb11e-7994-424c-9818-6c577e56c7af"&gt;&lt;/a&gt;
</code></pre>

<p>Thus I would like a method that would be able to wait for the popup result and continue the execution with the correct parameters (especially <code>data-ajax-success</code> and <code>data-ajax-failure</code> for ajax links).<br>
I think this would look like something like that:</p>

<pre><code>$(document.body).on('click', 'a[data-confirmation]:not([data-confirmation=""]), *[data-confirmation]:not([data-confirmation=""]) a',
    function (event) {
        //pause the event

        ShowYesNoPopup("My title", "My content",
            function () {
                //continue event
            },
            function () {
                event.preventDefault();
                return false;
            }
        );
    }
);
</code></pre>

<p>With the <code>ShowYesNoPopup</code>:</p>

<pre><code>function ShowYesNoPopup(title, content, yesCallback, noCallback) {
$("#popupOuterContainer").empty();
$('&lt;div id="popupContainer"&gt;&lt;/div&gt;').dialog({
    modal: true,
    appendTo: "#popupOuterContainer",
    closeText: '',
    buttons:{
        "yes":{
            text:'Ok',
            click: function() {
                $(this).dialog("close");
                yesCallback();
            }
        },
        "no":{
            text:'Cancel',
            click: function() {
                $(this).dialog("close");
                noCallback();
            }
        }
    },
    create: function (event, ui) {
        $("body").css({ overflow: "hidden !important" })
    },
    beforeClose: function (event, ui) {
        $("body").css({ overflow: '' })
    },
    open: function (event, ui) {
        $(".ui-dialog-title").html(title);
        $(this).html(content);
    }
});
}
</code></pre>

<p>I read lots of topics on this subjects but could not find one working in this particular situation. I tried to prevent the propagation before calling the popup, but then was not able to call the event again on popup <code>ok</code> button...
Some answers also said that this is was not possible and that javascript <code>confirm</code> was the only option to achieve that.</p>

<p>Is there a way in this case ? Am I missing something ?</p>

<p>Thanks a lot.</p>

<p><strong><em>UPDATE</em></strong></p>

<pre><code>$(document.body).on('click', 'a[data-confirmation]:not([data-confirmation=""]), *[data-confirmation]:not([data-confirmation=""]) a',
function (event) {
    event.preventDefault();

    if (should_do_ajax) {
        func_callback = function() {
            var url = $(this).attr('href');
            var successCallback = $(this).data("ajax-success");
            var failureCallback = $(this).data("ajax-failure");
            $.ajax({
                type: "POST",
                url: url,
                success: //what should I put here ? Because successCallback I retrieved from the link is a string, not a real function I think
                error: //same issue
            });
        }
    } else {
        func_callback = function() {
            link = $(this).attr('href');
            window.location = link;
        }
    }

    ShowYesNoPopup("My title", "My content",
        func_callback,
        function () {
            return false;
        }
    );
}
</code></pre>

<p>);</p>