title: Overriding javascript alert/confirm using jQuery and callback functions
body: <p>I am working on a globalization project where I need to update all of the JavaScript confirm and alert functions with versions that can be globalized.  I was reading through some questions asked about the subject here but couldn't find any solutions that were using callback functions.  I know that just replacing these functions with a newly defined dialog will not halt the execution of the script.  Callback functions are necessary but I am having some trouble with the implementation.</p>
  
  <p>Below is a block of javascript/jQuery code that I have been working with</p>
  
  <pre><code>PromptForExit = function () {
  $(document).ready(function () {
          //new confirm
          $dialog_confirm = $('&lt;div&gt;&lt;/div&gt;').dialog({
              resizable: false,
              height: 100,
              modal: true,
              autoOpen: false,
              buttons: {
                  "Ok - Configurable": function () {
                      $(this).dialog("close");
                      return true;
                  },
                  "Cancel - Configurable": function () {
                      $(this).dialog("close");
                      return false;
                  }
              }
          });
          //new alert
          $dialog_alert = $('&lt;div&gt;&lt;/div&gt;').dialog({
              resizable: false,
              height: 140,
              modal: true,
              autoOpen: false,
              buttons: {
                  okVal: function () {
                      $(this).dialog("close");
                  }
              }
          });
          //override alert
          window.alert = function (msg) {
              $dialog_alert.html(msg).dialog('open');
          };
          //override confirm
          window.confirm = function (msg) {
              $dialog_confirm.html(msg).dialog('open');
          };
      });
  
      //alert testing
      var anAlert = alert("jQuery alert");
      alert(EmptyFunc(anAlert));
      anAlert = alert("jQuery alert2");
      alert(EmptyFunc(anAlert));
  
      //confirm testing
      var resp = confirm("jQuery confirm");
      confirm(TempFunc(resp));
      resp = confirm("jQuery confirm 2");
      confirm(TempFunc(resp));
  };
  
  TempFunc = function (response) {
      if (response) {
          //take action if user choose OK
      }
      else {
          //different flow if they choose cancel
      }
  };
  
  EmptyFunc = function (anAlert) {
      return true;
  };
  </code></pre>
  
  <p>Whats happening now is only the very last gets shown, "jQuery confirm 2", but none of the others.  I imagine this is happening because my callback functions aren't setup properly but I have also noticed that anAlert and resp are always undefined after setting them to a confirm or alert.  Appreciate the help.</p>