title: Updating a div in the succes event of an Ajax call
body: <p>I am executing 3 nested synchronous jQuery Ajax calls. <strong>Inside the success event handler of the inner most Ajax call I have updated a div on the HTML page. This is not taking effect</strong> on the HTML page until all the calls get completed.</p>
  
  <p>My idea is to give updates to the users on the page about the progress of the process.</p>
  
  <p>The inner most Ajax call uses the information from the above 2 Ajax calls. Thats why if I execute the Ajax calls synchronously it gets wrong data for the inner most Ajax call due to the <code>for loops</code> get executed earlier than the main inner most Ajax call gets completed.</p>
  
  <p>Please look at these lines of code in the below sample code:</p>
  
  <pre><code>// ISSUE: This line of code takes effect on the HTML page after all the ajax calls get completed
  $("&lt;label&gt;" + responseText + "&lt;/label&gt;&lt;br /&gt;").appendTo('#DlgHdBodyContainer');
  </code></pre>
  
  <p><strong>Sample code:</strong>  </p>
  
  <pre><code>        //Asynchronous AJAX function to Retrieve a CRM record using OData
          $.ajax({
              type: "GET",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              url: odataUri,
              async: false,
              beforeSend: function (XMLHttpRequest) {
                  //Specifying this header ensures that the results will be returned as JSON.
                  XMLHttpRequest.setRequestHeader("Accept", "application/json");
              },
              success: function (data, textStatus, XmlHttpRequest) {
                  var customObjects1 = data.d.results;
  
                  for (var i = 0; i &lt; customObjects1.length; i++) {
                      var CustomObject1Id = customObjects1[i].cc_CustomObject1Id;
                      var ActivityId = customObjects1[i].Activity.Id;
                      var CustomObject1Name = customObjects1[i].Name;
  
                      if (customObjects1[i].Activity.Id != null) {
  
                          //Asynchronous AJAX function to Retrieve a CRM record using OData
                          $.ajax({
                              type: "GET",
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              url: odataUri,
                              async: false,
                              beforeSend: function (XMLHttpRequest) {
                                  //Specifying this header ensures that the results will be returned as JSON.
                                  XMLHttpRequest.setRequestHeader("Accept", "application/json");
                              },
                              success: function (data2, textStatus, XmlHttpRequest) {
  
                                  if (data2.d.results.length &gt; 0) {
  
                                      var CustomLists = data2.d.results;
  
                                      var ODATA_EntityCollection = "/cc_cloudcalltransactionsSet";
  
                                      for (var i = 0; i &lt; CustomLists.length; i++) {
  
                                          //debugger;
                                          var CustomListId = CustomLists[0].ItemId
  
                                          var pageNum = "1";
  
                                          while (pageNum != "-1") {
  
                                              var AjaxObject = new Object();
                                              AjaxObject.cc_type = {
                                                  Value: 21
                                              };
                                              AjaxObject.cc_PIN = pageNum;
                                              AjaxObject.cc_callhash = CustomObject1Id + "," + ActivityId + "," + CustomListId; // 300 characters max
  
                                              //Parse the entity object into JSON
                                              jsonEntity = window.JSON.stringify(AjaxObject);
  
                                              //Asynchronous AJAX function to Create a CRM record using OData
                                              $.ajax({
                                                  type: "POST",
                                                  contentType: "application/json; charset=utf-8",
                                                  dataType: "json",
                                                  url: ODATA_ENDPOINT + ODATA_EntityCollection,
                                                  async: false,
                                                  data: jsonEntity,
                                                  beforeSend: function (XMLHttpRequest) {
                                                      //Specifying this header ensures that the results will be returned as JSON.
                                                      XMLHttpRequest.setRequestHeader("Accept", "application/json");
                                                  },
                                                  success: function (data, textStatus, XmlHttpRequest) {
  
                                                      var NewCRMRecordCreated = data["d"];
  
                                                      pageNum = NewCRMRecordCreated.cc_PIN;
                                                      var responseText = NewCRMRecordCreated.cc_Response;
  
                                                      //alert(responseText);
  
                                                      // ISSUE: This line of code takes effect on the HTML page after all the ajax calls get completed
                                                      $("&lt;label&gt;" + responseText + "&lt;/label&gt;&lt;br /&gt;").appendTo('#DlgHdBodyContainer');
                                                  },
                                                  error: function (XMLHttpRequest, textStatus, errorThrown) {
  
                                                      pageNum = "-1";
                                                      return;
                                                  }
                                              });
                                          }
                                      }
                                  }
                              },
                              error: function (XmlHttpRequest, textStatus, errorThrown) {
  
                              }
                          });
  
                      };
  
                  }
  
              },
              error: function (XmlHttpRequest, textStatus, errorThrown) {
  
              }
          });
  </code></pre>
  
  <p><strong>Updated code:</strong><br>
  As suggested by <strong>mplungjan</strong> I updated the code below. I placed the inner-most Ajax call outside the two Ajax calls on which it was dependent. I placed the code to update the div <code>Updatediv("some string");</code> at different places in the code. Still the page is updating only after the code completes and the browser is returned with the control.</p>
  
  <p>Is there any way to udpate the page as soon as <code>UpdateDiv</code> is executed?</p>
  
  <pre><code>// Send each list to Api
  for (var i = 0; i &lt; objLists.length; i++) {
  
      var list = objLists[i];
  
      var pageNum = "1";
  
      var responseText = "";
  
      Updatediv("Synch process started");
  
      while (pageNum != "-1") {
  
          Updatediv("Processing page number " + pageNum);
  
          var CRMObject = new Object();
          CRMObject.cc_type = {
              Value: 21
          };
          CRMObject.cc_PIN = pageNum;
          CRMObject.cc_callhash = list.CustomObject1Id + "," + list.ActivityId + "," + list.listId; // cc_callhash is 300 characters max
  
          //Parse the entity object into JSON
          jsonEntity = window.JSON.stringify(CRMObject);
  
          //Asynchronous AJAX function to Create a CRM record using OData
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              url: ODATA_ENDPOINT + ODATA_EntityCollection,
              async: false,
              data: jsonEntity,
              beforeSend: function (XMLHttpRequest) {
                  //Specifying this header ensures that the results will be returned as JSON.
                  XMLHttpRequest.setRequestHeader("Accept", "application/json");
              },
              success: function (data, textStatus, XmlHttpRequest) {
  
                  var NewCRMRecordCreated = data["d"];
  
                  pageNum = NewCRMRecordCreated.cc_PIN;
                  responseText = NewCRMRecordCreated.cc_Response;
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                  pageNum = "-1";
                  return;
              }
          });
  
          Updatediv(responseText);
  
  
      } // END:  while (pageNum != "-1")
  
  } // END: for (var i = 0; i &lt; objLists.length; i++)
  
  function Updatediv(responseText)
  {
      $("&lt;label&gt;" + responseText + "&lt;/label&gt;&lt;br /&gt;").appendTo('#DlgHdBodyContainer');
  
  }
  </code></pre>