title: Updating page content using JS during asynchronous operation
body: <p>I am trying to solve an issue with webservice call in my MVC 4 project. What I am doing is that when user submits form on page, I call webservice and wait for result. Meanwhile server returns callbacks (it is returning strings containing finished steps of work on server side). What I would like to do is to display contents of "log" I am building from callback on the page and refresh it repeatedly to display the progress.</p>
  
  <p>The issue I run into is, that either I will have asynchronous call of webservice in my controller in which case I am not waiting for result from webservice and that means that user will not stay on the page that should be displaying progress, or I will call it synchronously, in which case javascript on the page will not get response from controller until the final response arrives (so no updates are displayed).</p>
  
  <p>My desired flow is:</p>
  
  <ol>
  <li>User submits the form</li>
  <li>Server is called in controller</li>
  <li>Server sends callbacks, controller processess them by expanding "log" variable with whatever arrives</li>
  <li>User still sees the same page, where "log" (contained in specific div) is being periodically refreshed by javascript while controller waits for final result from server</li>
  <li>Server returns final result</li>
  <li>Controller finishes its code and returns new view</li>
  </ol>
  
  <p>This is my post method, which currently doesnt wait for the response and proceeds immediately further:</p>
  
  <pre><code>[HttpPost]
  public async Task&lt;ActionResult&gt; SubmitDetails
                 (DocuLiveInstallationRequest submittedRequest, string command)
  {
      request = submittedRequest;
      try
      {
          switch (command)
          {
              case "Test":
                  {
                      request.OnlyTest = true;
                      DocuLiveInstallationStatus installStatus 
                                                         = await IsValidStatus();
                      if (installStatus == null)
                      {
                          ViewBag.Fail = Resources.AppStart.TestNoResult;
                          return View("SubmitDetails", request); ;
                      }
                      else
                      {
                          status = installStatus;
                          if (status.Result)
                          {
                              ViewBag.Success = Resources.AppStart.TestSucces;
                              ViewBag.Log = installLog;
                          }
                          TempData["installationStatus"] = installStatus;
                          return View("SubmitDetails", request);
                      }
                  }
              case "Submit":
                  {
                      request.OnlyTest = false;
                      DocuLiveInstallationStatus installStatus = await Install();
                      if (installStatus == null)
                      {
                          ViewBag.Fail = Resources.AppStart.InstallationNoResult;
                          return View("SubmitDetails", request); ;
                      }
                      else
                      {
                          status = installStatus;
                          TempData["installationStatus"] = installStatus;
                          TempData["installLog"] = installLog;
                          return RedirectToAction("Login",controllerName:"Login");
                      }
                  }
          }
          ViewBag.TestFail = Resources.AppStart.SubmitFailure;
          return View("SubmitDetails", request); ;
      }
      catch
      {
          return View();
      }
  }
  </code></pre>
  
  <p>this is javascript I prepared for the view:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          //$("#submitDetails").click(function () {
              var progress = 0;
              //$("#submitDetails").attr('disabled', 'disabled');
              var statusUpdate = setInterval(function () {
                  $.ajax({
                      type: 'GET',
                      url: "/AppStart/GetInstallProgress",
                      datatype: "application/html; charset=utf-8",
                      success: function (data) {
                          if (data &amp;&amp; data != "") {
                              $("div.status-message").text(progress);
                          }
                      }
                  });
              }, 2000);
          //});
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently I just display the log on the next page (at this stage of development server returns response very swiftly), but I need to call the server, display progress from callbacks while waiting for result and THEN navigate to another page (depending on the result). I feel like I am very close, but I can't get it working.</p>
  
  <p>PS: I am open to other solutions than updating page content. I don't really mind how the goal will be accomplished, but updating the page is preferred by the customer.</p>