javascript - Error Loading AJAX on Document Ready Using JQuery -

i'm trying create php page periodically updates values of several elements on page. i'm using host limits hits per day, , each hit page they're hosting me counts against total. therefore, i'm trying use jquery/ajax load of information need other pages @ 1 time.

i'm calling following index.php. method achieves desired affect way want it, results in 3 hits (dating.php, dgperc.php, , pkperc.php) every 2 seconds:

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);

i'm calling following index1.php. i'm @ far method results in 1 hit every 2 seconds. workaround have combined 3 php pages loading one, dating1.php. load div element, #cache, @ once. element set hidden using css, , copy inner html appropriate elements:

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);

dating1.php produce different outputs every time it's run, here example of output:

<span id = "dating">4 years, 7 months, 3 weeks, 10 seconds ago.</span>  <span id = "dgperc">21.9229663059</span>  <span id = "pkperc">22.2121099923</span>

on document ready, index1.php not function properly: #cache element isn't filled @ all, other elements don't filled either. however, after 2 seconds, loaddata() function runs again, , #cache element filled correctly, , other elements. reason, isn't problem on index.php page @ all, , i'm not sure why there's difference here.

how can #cache load first time page loads correctly? or there better way this?

each ajax call page visit in background. telling assistant 3 different times 1 coffee. or telling them 1 3 coffees.

if don't want combine 3 php pages 1 - keeping code separate , easier maintain. consider creating 1 "cache.php" script , inside it:

cache.php:  $outputdata = array('dating' => false, 'dgperc' => false, 'pkperc' => false);  foreach($outputdata $file => &$data) {     //buffer output     ob_start();      //run first script (be smart , file_exists() first)     include_once($file . '.php');      $data = ob_get_clean(); }  //output json-compliant easy jquery consumption echo json_encode($outputdata); 

then in javascript:

function loaddata() {     if (focused) {         //call ajax json , fill spans         $.ajax({             async: true,             cache: false,             datatype: 'json',             success: function(data, textstatus, jqxhr) {                 $('#dating').html(data.dating);                 $('#dgperc').html(data.dgperc);                 $('#pkperc').html(data.dgperc);                  // note... console.dir(data) correct notation returned data             },             url: 'cache.php'         }); } 

you calling cache.php once every 2 seconds, saving on 3-hits of calling php files individually. using middle-man file keep scripts separate maintainability.