title: Detect end of ajax request from asp by javascript
body: <p>If the user click on an <code>input</code>-tag (<code>type="radio"</code>), I load new data from the database. Because it can spend a time, I show a loading animation. After it must the animation be undisplayed. </p>
  
  <p>Now is my question: how can I detect if your ajax request from an aspx page has been finished by javascript code for undisplaying the animation? If no, are there other ways to get the same result?</p>
  
  <p><strong>Update 1:</strong> I use only this lines of code:</p>
  
  <pre><code>&lt;asp:ScriptManager EnablePartialRendering="true"  runat="server" /&gt;
  
  &lt;asp:UpdatePanel ID="updPnlCategorieen" UpdateMode="Always" runat="server"&gt;
      &lt;ContentTemplate&gt;
  
          &lt;asp:Panel ID="pnlHoofdTopics" CssClass="topics" runat="server" /&gt;
          &lt;asp:Panel ID="pnlCategorien" CssClass="topics" runat="server" /&gt;
          &lt;asp:Panel ID="pnlItems" CssClass="topics" runat="server" /&gt;
  
          &lt;asp:Panel cssclass="loading" ID="pnlLaden" runat="server"&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;div class="circle1"&gt;&lt;/div&gt;
          &lt;/asp:Panel&gt;
  
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  </code></pre>
  
  <p>And place the triggers by code behind <em>(C#)</em>:</p>
  
  <pre><code>updCategorieen.Triggers.Add(new AsyncPostBackTrigger() {
      ControlID = rbtCat.ID,
      EventName = "CheckedChanged"
  });
  </code></pre>
  
  <p>For show the loading animation I use javascript. The code below:</p>
  
  <pre><code>var topic = []; //--&gt; location for all the radio buttons
  var laden; //--&gt; location for loading div
  
  document.addEventListener("DOMContentLoaded", function () {
      init();
  });
  
  function init() {
  
      laden = document.getElementsByClassName("loading")[0];
      topic = document.getElementsByClassName("topic");
  
      laden.style.display = "none";
  
      for (i = 0; i &lt; topic.length; i++) {
  
          topic[i].addEventListener("click", function () {
              startLaden();
          });
      }
  
      geladen.addEventListener("change", function () {
          stopLaden();
      });
  }
  
  function startLaden() {
  
      laden.style.display = "block";
  }
  
  function stopLaden() {
  
      laden.style.display = "none";
  
      topic = document.getElementsByClassName("topic");
  }
  </code></pre>
  
  <p><strong>Update 2:</strong> I've also try to remove it on server side after loading all topics.</p>
  
  <pre><code>pnlLaden.Style["display"] = "none";
  </code></pre>
  
  <p>That works, but if I'll show it again, the loading animations don't come back. So, I do this on the begin. </p>
  
  <pre><code>pnlLaden.Style["display"] = "block";
  </code></pre>
  
  <p>But has no effect...</p>
  
  <p><strong>I've also tried</strong> some thing found on internet but doesn't work like <code>live</code>, <code>on</code> etc. but nothing works.</p>
  
  <p>Can anyone help me, I'm new with ajax and Asp.net?<br/>
  Thanks and sorry for my poor english.</p>