<?php

// if being called by ajax, just show new content and exit.
if (@$_GET['ajax']) {
  echo getAjaxContent( @$_GET['ajax'] );
  exit;
}

// this function is called by page to show contents on page load and by ajax to get just refreshed content
function getAjaxContent($rowNum = 0) {

  foreach (range(1,10) as $counter) {
    $rowNum++;
    echo "Result $rowNum - " . rand() . "<br/>\n";
  }
  echo "<div style='display: none' id='rowNum'>$rowNum</div>\n"; // keep track of last row num
  
}

?>
<html>
  <head></head>
<body>
<h1>Ajax Random Number Generator</h1>

This is the header</br>
This page was generated at: <?php echo @date('Y-m-d H:i:s'); ?><hr/>



This is the ajax part here:
<div style="background-color: #EEE" id="ajaxBox">
  <?php echo getAjaxContent('0'); ?>
</div>

<a href="#" onclick="updateAjaxContent(); return false;">Show more random numbers</a>

<hr/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function updateAjaxContent() { 
  var ajaxUrl = "?ajax=" + $('#rowNum').text();
  $.get(ajaxUrl, function( data ) {
    $('#ajaxBox').html(data);
  });
}
</script>

And here is the footer.
</body>
</html>

