title: Error Loading AJAX on Document Ready Using JQuery
body: <p>I'm trying to create a PHP page that periodically updates values of several elements on the page. I'm using a host that limits my hits per day, and each hit to any page they're hosting for me counts against my total. Therefore, I'm trying to use JQuery/AJAX to load all of the information that I need from other pages at one time.</p>
  
  <p>I'm calling the following index.php. This method achieves the desired affect exactly the way I want it, but results in three hits (dating.php, dgperc.php, and pkperc.php) every two seconds:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var focused = true;
  $(window).blur(function() {
      focused = false;
  });
  $(window).focus(function() {
      focused = true;
  });
  function loadData() {
      if (focused) {
           var php = ["dating", "dgperc", "pkperc"];
           $.each(php, function(index, value) {
               $('#'+this).load(this+'.php');
           });
      }
  }
  $(document).ready(function() {
      loadData();
  });
  setInterval(function() {
      loadData();
  }, 2000);</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm calling the following index1.php. This is where I'm at as far as a method that only results in one hit every two seconds. My workaround is that I have combined the three php pages that I was loading into one, dating1.php. I load this into a div element, #cache, all at once. This element is set to hidden using CSS, and then I just copy its inner HTML into the appropriate elements:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var focused = true;
  $(window).blur(function() {
      focused = false;
  });
  $(window).focus(function() {
      focused = true;
  });
  function loadData() {
      if (focused) {
          var php = ["dating", "dgperc", "pkperc"];
          $('#cache').load('dating1.php');
          $.each(php, function(index, value) {
              $('#'+this+'1').html($('#'+this).html());
          });
      }
  }
  $(document).ready(function() {
      loadData();
  });
  setInterval(function() {
      loadData();
  }, 2000);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Dating1.php will produce different outputs every time it's run, but here is an example of the output:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id = "dating"&gt;4 years, 7 months, 3 weeks, 10 seconds ago.&lt;/span&gt;
  &lt;span id = "dgperc"&gt;21.9229663059&lt;/span&gt;
  &lt;span id = "pkperc"&gt;22.2121099923&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On document ready, index1.php does not function properly: the #cache element isn't filled at all, so the other elements don't get filled either. However, after two seconds, the loadData() function runs again, and then the #cache element is filled correctly, and so are the other elements. For some reason, this isn't a problem on my index.php page at all, and I'm not sure why there's a difference here.</p>
  
  <p>How can I get #cache to load the first time so that the page loads correctly? Or is there a better way to do this?</p>