title: Hiding loading overlay after function has completed
body: <p>I have a page which upon click of a button opens a pop up to confirm deletion an element of that page.   Upon hitting on Yes, the method in the controller is triggered and the element is deleted in the database but when the page is loaded again, the grey loading overlay still remains, and the element which was supposed to disappear is still seen.  Below are my codes.</p>
  
  <p><strong>CSHTML code of link to delete element:</strong></p>
  
  <pre><code>&lt;div style="float: left; width: 40px; height: 10px; "&gt; @Html.ActionLink
  ("-S", "DeleteSection", "Section", new { id = @Model.Id }, new { 
  onclick = "ConfirmDeleteSection();", @class = "editLink", 
  style = "width:30px" })&lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript: ConfirmDeleteSection() function:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function ConfirmDeleteSection() {
      var x = confirm("Are you sure you want to delete this section?");
      if (x) 
          return true;
      else
          return false;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Controller: SupprimerSection method:</strong></p>
  
  <pre><code>    public ActionResult DeleteSection(int id)
      {
          try
          {
              //get section by id
              var section = _service.GetSection(id);
  
              DeleteSection(section);
  
              return RedirectToAction("Pages", "Section");
          }
          catch (Exception e)
          {
              //log e
              return base.Erreur();
          }
      }
  </code></pre>
  
  <p><strong>Controller: Pages method:</strong></p>
  
  <pre><code>     public ActionResult Pages()
      {
          try
          {
              var liste = _service.GetListeSection();
              return View(liste);
          }
          catch (Exception e)
          {
              //log e
              return base.Erreur();
          }
  
      }
  </code></pre>
  
  <p>So as you can see, upon clicking on Yes in the pop up, the method DeleteSection is triggered and the Section is deleted in the database.  It then goes to the method Page which fetch all the sections in the database to display them.  However, when the page is loaded, it has that grey loading overlay, which prevents me from clicking on any element in the page and the section which has just been deleted is still seen.  However, when I refresh the page, the deleted element is not seen. Any idea where the error could be?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>When the page is loaded again, in the browser's console I have this:</p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check <a href="http://xhr.spec.whatwg.org/" rel="nofollow">http://xhr.spec.whatwg.org/</a>.</p>
  </blockquote>
  
  <p>The whole Javascript:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
      var linkObj;
      $(function () {
          $(".editLink").button();
          var x = "connecter";
          $('#updateDialog').dialog({
              autoOpen: false,
              width: 400,
              resizable: false,
              modal: true,
              buttons: {
                  "Login": function () {
                      $("#update-message").html(''); //make sure there is nothing on the message before we continue                         
                      $("#updateForm").submit();
                  },
                  "Cancel": function () {
                      $(this).dialog("close");
                  }
              }
          });
  
          $($("button", $("#updateDialog").parent())[0]).text("Save");
          $($("button", $("#updateDialog").parent())[1]).text("Cancel");
  
          $(".editLink").click(function (e) {
              //change the title of the dialog
              linkObj = $(this);
              var dialogDiv = $('#updateDialog');
              var viewUrl = linkObj.attr('href');
              $.get(viewUrl, function (data) {
                  dialogDiv.html(data);
                  //validation
                  var $form = $("#updateForm");
                  // Unbind existing validation
                  $form.unbind();
                  $form.data("validator", null);
                  //open dialog
                  dialogDiv.dialog('open');
                  e.preventDefault();
              });
              return false;
          });
  
      });
  </code></pre>
  
  <p><strong>AJAX call</strong></p>
  
  <pre><code>@model Model.Models.CMS.Section
  
  @using (Ajax.BeginForm("DeleteSection", "Section", new AjaxOptions
          {
              InsertionMode = InsertionMode.Replace, 
              HttpMethod = "POST",
              OnSuccess = "updateSuccess"
          }, new { @id = "updateForm" }))
      {
      &lt;div id="delete-message" class="error" &gt;&lt;/div&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Section&lt;/legend&gt;
              @Html.HiddenFor(m =&gt; m.Id)
              &lt;div&gt;
                  Êtes-vous sûr de vouloir supprimer cette section?
              &lt;/div&gt;
  
      &lt;/fieldset&gt;
  }
  </code></pre>