title: How can I hide page elements till an AJAX call completes?
body: <p>I am writing HTML that looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;div id='chart_div'&gt;&lt;/div&gt;
      &lt;div style='visibility:hidden;' id='my_grad'&gt;
          &lt;svg&gt;
              &lt;!-- The SVG element I want to hide until the data for the chart
                   in chart_div is obtained and the chart renders --&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my JavaScript, I have tried both of the following AJAX calls:</p>
  
  <hr>
  
  <pre><code>$.ajax({
      url: 'http://example.com/path/to/source/data',
      dataType: 'jsonp',
      success: function(data) {
          // Parse data and create chart (for chart_div).
      },
      complete: function (data) {
          $('#my_grad').show();
      }
  });
  </code></pre>
  
  <hr>
  
  <pre><code>$.ajax({
      url: 'http://example.com/path/to/source/data',
      dataType: 'jsonp',
      success: function(data) {
          // Parse data and create chart (for chart_div).
      }
  }).done(function(){
      $("#my_grad").show(); 
  });
  </code></pre>
  
  <hr>
  
  <p>The problem is that although the SVG element is hidden as it is supposed to be initially, it fails to be shown after the charts are loaded in both cases.</p>
  
  <p>How can I make a CSS portion of a page wait till the AJAX call finishes to appear?</p>