title: Wait for popup result on link click before executing
body: <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>