title: How to reload MySQL records in AJAX div while results are being returned?
body: <p>I want to know how to reload a <code>&lt;div&gt;</code> using <code>AJAX</code> where the content being displayed are records retrieved from the <code>MySQL</code> <code>database</code>. The tricky part is that I want the <code>&lt;div&gt;</code> to display each result for 30 seconds and then reload to display the next result.</p>
  
  <p>Here is the <code>media table</code>:</p>
  
  <pre><code>_______________________________________________
  | FIELD 1 |  FIELD 2  |  FIELD 3  |  FIELD 4  |
  -----------------------------------------------
  |   ID    |   TVOne   |   TVTwo   |  Active   |
  -----------------------------------------------
  |   15    |   no      |     no    |    no     |
  -----------------------------------------------
  |   29    |   yes     |     no    |   yes     |
  -----------------------------------------------
  |   53    |    no     |     no    |    no     |
  -----------------------------------------------
  |   71    |   yes     |    yes    |    yes    |
  -----------------------------------------------
  </code></pre>
  
  <p>In the <code>&lt;div&gt;</code> located on TVOne's page I want it to load record 29 and 71. In the <code>&lt;div&gt;</code> located on TVTwo's page I want it to only load record 71. This <code>table</code> is modified by the user on the back-end, so the results are always going to be different.</p>
  
  <p>I was reading <a href="https://stackoverflow.com/questions/11070607/reload-mysql-data-inside-a-div-using-ajax">THIS QUESTION</a> and I believe the <code>javascript</code> selector <code>.eq()</code> could be a piece of the puzzle, but I'm not sure how to put it all together.</p>
  
  <p>The page where the <code>&lt;div&gt;</code> is located is called <code>index4.php</code>. The previous page (<code>index3.php</code>) performs a query to see if any of the records are set to active, if they are then it sets <code>num_rows</code> to <code>$count</code> and goes to <code>index4.php?count=$count</code>, if not it goes back to the beginning of the display sequence <code>index.php</code>.</p>
  
  <p>Here is <code>index3.php</code> redirect function:</p>
  
  <pre><code>&lt;?php
  $result = $mysqli-&gt;query("SELECT * FROM media WHERE Active = 1 AND TVTwo = 1");
  $count = $result-&gt;num_rows;
  if($count &gt; 0){$media = "index4.php?count=$count";}
  else{$media = "index.php";}
  ?&gt;
  
  &lt;script&gt;
  refresh=window.setTimeout(function(){location.href="&lt;?php echo $media;?&gt;"},15000);
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my <code>AJAX</code> code to load the <code>&lt;div&gt;</code>:</p>
  
  <pre><code>&lt;script&gt;
  function MediaQuery(qty)
      {
      if (qty=="")
          {
          document.getElementById("Media").innerHTML="";
          return;
          }
      if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
      else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
      xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
              {
              document.getElementById("Media").innerHTML=xmlhttp.responseText;
              }
          }
      xmlhttp.open("GET","../process/QueryMedia.php?count="+qty,true);
      xmlhttp.send();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is QueryMedia.php:</p>
  
  <pre><code>&lt;?php
  $count = $_GET["count"];
  
  $sql = ("SELECT * FROM media WHERE Active = 1 AND TVTwo = 1 LIMIT $count");
  
  if(!$result_sql = $mysqli-&gt;query($sql))
      {
      echo QueryCheck("getting the media records ","from the media",$mysqli);
      }
  
  // fetch it here
  ?&gt;
  </code></pre>