title: Asynchronous AJAX calls (multiple)
body: <p>I posted this yesterday but i may not have explained my situation well.</p>
  
  <p>I have 3 grids on a page that are built dynamically through JavaScript.</p>
  
  <p>I then have 3 separate JavaScript methods to set a session when a row is clicked in a certain grid.</p>
  
  <p>Once the session is set i would like it to navigate to the next page.</p>
  
  <p>Here is what i have</p>
  
  <blockquote>
    <p>OnClick event</p>
  </blockquote>
  
  <pre><code>    $('#clinician-planned').on('click', 'tbody&gt;tr&gt;td:not(:last-child):not(:first-child)', function () {
          var ID = $(this).closest("tr").children("td.grid__col--id").find("[name=patient-link]").text().trim();
          var Location = '@Url.Action("SetPASession", "Clinician")';
          AjaxCall(Location, ID);
      });
      $('#clinician-recent').on('click', 'tbody&gt;tr&gt;td:not(:last-child):not(:first-child)', function () {
         var ID = $(this).closest("tr").children("td.grid__col--id").find("[name=patient-link]").text().trim();
         var Location = '@Url.Action("SetRDSession", "Clinician")';
         AjaxCall(Location, ID);
  
      });
      $('#clinician-theatre').on('click', 'tbody&gt;tr&gt;td:not(:last-child):not(:first-child)', function () {
          var ID = $(this).closest("tr").children("td.grid__col--id").find("[name=patient-link]").text().trim();
          var Location = '@Url.Action("SetTESession", "Clinician")';
          AjaxCall(Location, ID);
      });
  </code></pre>
  
  <blockquote>
    <p>AJAX Post To Controller</p>
  </blockquote>
  
  <pre><code>        function AjaxCall(Location, ID) {
          alert('1');
               $.ajax({
                  type: 'POST',
                  url: Location,
                  dataType: 'text',
                  async: false,
                  contentType: 'application/json; charset=utf-8',
                  error: function (response) { alert(JSON.stringify(response)); }
               }).done(function (response) {
                   alert('2');
                   location.href = "@Url.Action("Summary", "Patient")" + "/" + ID;
              });
      }
  </code></pre>
  
  <blockquote>
    <p>Here are the controller methods</p>
  </blockquote>
  
  <pre><code>    public ActionResult SetPASession()
      {
          Session.Remove("Clinician");
          Session["Clinician"] = "pa";
          return Json(null);
      }
      public ActionResult SetRDSession()
      {
          Session.Remove("Clinician");
          Session["Clinician"] = "rd";
          return Json(null);
      }
      public ActionResult SetTESession()
      {
          Session.Remove("Clinician");
          Session["Clinician"] = "te";
          return Json(null);
      }
  </code></pre>
  
  <p>The problem i have is when the row is clicked "alert('1'); shows instantly, however it seems like it takes a while and waits for all grids to be populated before the 2nd alert appears. I have tried putting async: false, but this doesnt seem to work. </p>
  
  <p>Any ideas would be much appreciated.</p>