title: Saving data via AJAX, once done only then redirect the user
body: <p>I am working on a form which is saved via ajax, this part is working perfectly fine. The problem I am having is user looses the data when before saving the form he clicks on another link which redirects the user to another page.</p>
  
  <p>As a solution, I thought of using JavaScript function so <code>onclick</code> of hyperlink I am prompting the user to save the data before moving on. I am utilizing the same function that saves the data via AJAX and upon successful saving redirect the user. This is what my prompt looks like. </p>
  
  <pre><code>function saveThenRedirect(redirect) {
      if (confirm("Please save your data before moving away") == true) {
          update();// AJAX function that saves the data
          window.location = redirect;//redirect the user
      } else {
          window.location = redirect;
      }
  }
  </code></pre>
  
  <p>The thing is before the <code>update()</code>; function gets the chance to save the data, user gets redirected or while it is in process of saving the redirection takes place. So this is what I need help in, what can i do to run the <code>update()</code> function first and only once it is done running redirect the user?</p>
  
  <p>Note: I did look into <code>window.onbeforeunload</code> but i decided to go with a simple prompt and then use function to save and redirect.</p>
  
  <p>This is what my <code>update</code> function looks like</p>
  
  <pre><code>function update() {
      $.ajax({
          type: "POST",
          url: "classes/data.class.php",
          data: $("#pay-form").serialize(),
          beforeSend: function () {
              $('#dvloader').show();
          },
          success: function (html) {
              var load1 = new $.Deferred();
              var load2 = new $.Deferred();
              var load3 = new $.Deferred();
              var load4 = new $.Deferred();
  
              $.when(load1, load2, load3, load4).then(function () {
                  $('#dvloader').hide();
              });
  
              $('#income-expense-div').load('dashboard-sidebar.php', function () {
                  load1.resolve();
              });
              $('#pay-div').load('dashboard-pay.php', function () {
                  load2.resolve();
              });
              $('#assets-div').load('dashboard-assets.php', function () {
                  load3.resolve();
              });
              $('#liabilities-div').load('dashboard-liabilities.php', function () {
                  load4.resolve();
              });
          }
      });
  }
  </code></pre>
  
  <p>I will really appreciate any help.</p>
  
  <p><strong>Please note that <code>update</code> is the SAME function being used with Save button (where redirection is not required). If I add the redirect inside ajax success call the user will get redirected. This redirect is ONLY needed if user clicks on another link, so the saving needs to take place first and then redirection</strong></p>