Flash_Back Flash_Back - 27 days ago 6
Javascript Question

Wait for popup result on link click before executing

I am working on an ASP.NET MVC project and I would like all links with an attribute

data-confirmation
to display a custom confirm box before executing.

Those links can be
ajax
links with different
data-ajax-success
attributes like this one:

<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"></a>


Or simple links like this one:

<a href="/OtherController/OtherAction/3ebdb11e-7994-424c-9818-6c577e56c7af"></a>


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
data-ajax-success
and
data-ajax-failure
for ajax links).

I think this would look like something like that:

$(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;
}
);
}
);


With the
ShowYesNoPopup
:

function ShowYesNoPopup(title, content, yesCallback, noCallback) {
$("#popupOuterContainer").empty();
$('<div id="popupContainer"></div>').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);
}
});
}


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
ok
button...
Some answers also said that this is was not possible and that javascript
confirm
was the only option to achieve that.

Is there a way in this case ? Am I missing something ?

Thanks a lot.

UPDATE

$(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;
}
);
}


);

Answer

Once the ShowYesNoPopup function has finished (and it happen immediately after the call to dialog() your code goes back to the click event, and unless you will call event.preventDefault() - the default behavior of your action will be triggered (which in your case is trigger the link-click, which cause the browser to change to that page).

What you can do use start with preventing the default behavior, and make sure that the yesCallback is a function that emulate this behavior (for example - window.location = $(this).attr('href') )

$(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() {
                $.ajax({
                 ...
                });
            }
        } else {
            func_callback = function() {
                link = $(this).attr('href');
                window.location = link;
            }
        }


        ShowYesNoPopup("My title", "My content",
            func_callback,
            function () {
                return false;
            }
        );
    }
);

You should probably change the content of the yesCallback function according to the data-* values you have (ajax call/something else).

Comments