AJAX Div Retrieval every 60 seconds

Question

What I would like to do is retrieve the contents of a PHP file and insert it into a div every 60 seconds, basically refreshing the dynamic div. I've come up with the following code so far, however it doesn't seem to be working. The code is just like this, nothing extra, apart from the MYSQL login.

PHP to grab:

<?php                   
$time = date("m/d/Y h:i:s a", time());
                mysql_query("UPDATE djs SET requesttime='{$time}' WHERE username='{$djs['username']}'")
                or die(mysql_error()); 

                $request_db = mysql_query("SELECT * FROM requests
                WHERE haveplayed='0'") or die(mysql_error());  
                echo "<table style=\"border:1px solid;width:99%;margin-left:auto;margin-right:auto;\" border=\"1\">";
                echo "<tr><th>Title</th><th>Artist</th><th>Dedicated To...</th></tr>";
                while($request = mysql_fetch_array( $request_db )) {
                    echo "<tr><td style=\"width:33%;padding:1px;\">";
                    echo $request['SongName'];  
                    echo "</td><td style=\"width:33%;\">";
                    echo $request['Artist'];    
                    echo "</td><td style=\"width:33%;\">";
                    echo $request['DedicatedTo'];
                    echo "</td></tr>";  
                }
                echo "</table>";
            ?>

The original PHP code is just the same, enclosed in a div with an id attribute of 'ajax_table'.

The JavaScript is:

// JavaScript Document
var xmlHttp_moniter

function moniter()
{
    xmlHttp_moniter = GetXmlHttpObject_parcel()
if(xmlHttp_moniter == null)
{
    alert("browser does not support HTTP Request")
    return
}
var url="ajax_table.php?random=" + Math.random()
xmlHttp_moniter.onreadystatechange = stateChanged
xmlHttp_moniter.open("GET",url,true)
xmlHttp_moniter.send(null)

}

function stateChanged()
{
if(xmlHttp_moniter.readyState==4 || xmlHttp_moniter.readyState == "complete")
{
    document.getElementById("ajax_table").innerHTML = xmlHttp_moniter.responseText
    setTimeout('ajax_table()',60000);
}
}

function GetXmlHttpObject_parcel()
{
var xmlHttp_moniter=null;
try
{
    xmlHttp_moniter=new XMLHttpRequest();
}
catch (e)
     {
         //Internet Explorer
         try
          {
              xmlHttp_moniter=new ActiveXObject("Msxml2.XMLHTTP");
          }
         catch (e)
          {
          xmlHttp_moniter=new ActiveXObject("Microsoft.XMLHTTP");
          }
     }
return xmlHttp_moniter;
}

and that is on the page that is requesting the other php page.

Answer 1

How about using a framework like jQuery to simplify your javascript:

$(function() {

  setInterval(function() {
    $.get('ajax_table.php', function(data) {
      $('#ajax_table').html(data);
    });
  }, 60 * 1000);

});

Answer 2

At first, there's no js function ajax_table() called in

setTimeout('ajax_table()',60000);

in your code.

At second point, are you sure you are calling moniter() function somewhere for the first time?

Answer 3

Try this, You can retrieve the contents of a PHP file and insert it into a div for every 60 seconds http://www.webtrickss.com/ajax/how-to-refresh-a-div-using-ajax/