Дождитесь появления всплывающего окна при нажатии ссылки перед выполнением

Question

Я работаю над проектом ASP.NET MVC, и я хотел бы, чтобы все ссылки с атрибутом data-confirmation отображали пользовательское окно подтверждения перед выполнением.
Эти ссылки могут быть ajax ссылки с различными data-ajax-success атрибутами, как это:

<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> 

Или простые ссылки, как это одна:

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

Таким образом, я хотел бы метод, который смог бы ждать результат всплывающего окна и продолжить выполнение с правильными параметрами (особенно data-ajax-success и data-ajax-failure для ссылок ajax).
Я думаю, что это будет выглядеть как-то вроде этого:

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

С 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); 
    } 
}); 
} 

Я прочитал много тем на этой тематике, но не мог найти работы в данной конкретной ситуации. Я пытался предотвратить распространение, прежде чем вызывать всплывающее окно, но затем не смог вызвать событие снова на всплывающее окно ok ... В некоторых ответах также говорилось, что это невозможно, и что javascript confirm был единственным вариантом для достижения этого ,

Есть ли способ в этом случае? Я что-то упускаю ?

Большое спасибо.

ОБНОВЛЕНИЕ

$(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 1

Как только функция ShowYesNoPopup закончила (и это произошло сразу же после вызова dialog() вашего код восходит к click событию, и если вы не будете называть event.preventDefault() - поведение по умолчанию ваших действий будет срабатывать (в вашем случае запускает щелчок по ссылке, что приводит к изменению браузера на эту страницу).

Что вы можете использовать, начните с предотвращения поведения по умолчанию и убедитесь, что функция yesCallback является функцией, которая эмулирует это поведение (например, - 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; 
      } 
     ); 
    } 
); 

Возможно, вы должны изменить содержимое функции yesCallback в соответствии с имеющимися значениями data-* (ajax call/something else).