title: jQuery AJAX update widget as page loads
body: <p>I'd like to retrieve the number of devices from my database (by counting rows) and present them in a widget with the updated value as the page loads.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>        &lt;div class="col-lg-3 col-sm-6"&gt;
              &lt;div class="widget-panel widget-style-2 white-bg"&gt;
                  &lt;i class="ion-eye text-pink"&gt;&lt;/i&gt; 
                  &lt;h2 class="m-0 counter"&gt;&lt;span id="server_count"&gt;100&lt;/span&gt;&lt;/h2&gt;
                  &lt;div&gt;Servers&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  ...
  
      $(function (){
  
          $.ajax({
  
              type: 'POST',
              url: 'dashboard/analytics/server_count',
              success: function(result) {
                  //alert(result);
                  $('#server_count').html(result);
                  },
              error: function() {
                  alert("problem");
                  }
  
          });
  
      });
  </code></pre>
  
  <p>The alert shows the correct value in the success function, but I'm having trouble updating the div as the page is rendered; that is, it still shows the default static value (100). </p>
  
  <p>Any ideas on what I'm missing? How should I write this so that the default value always gets overwritten by the dynamic value pulled from the DB, in time for the page load? Thanks!</p>