How auto updated the database without refresh with ajax?

Question

hi. i'm new here. i just create a code which can read the data from mysql database. But when i add in new data inside databse, my php page cant updated own automatic. I want the page can updated automaticly withour press f5 button and refresh. Can anyone help me solve this?

Get any misstake??

<script type="text/javascript">
function List(){
 var ajaxRequest;
 var selectedProduct = ""; 
 var product = document.getElementById('product');
 var output ="";   
 var k = 0; 
// var name = new Array;
// var model = new Array;
 var unitprice = new Array;
 var queryString = new Array;

 queryString = "&name=" + txtname + "&model=" + txtmodel + ;
   ajaxRequest.open("GET", $productPrice + queryString, true);
   ajaxRequest.send(null); 
 ajaxRequest.open("GET", $productPrice + queryString, true);
 ajaxRequest.send(null); 

  <?php foreach ($productPrices as $price): ?>
   name[k] = "<?php echo $price['Product']['txtname']; ?>";
   model[k] = "<?php echo $price['Product']['txtmodel']; ?>";
   k++;

  <?php endforeach; ?>

  k=0;
  for (var i = 0; i < product.length; i++) { 
    k = product.options[i].value;

   if (product.options[i].selected) {  
    output += '<tr>'+
        '<td style="border-right: 0px; width:270px; text-align:center" id="ProductProduct'+k+'" name="data[Product][Product]['+k+']">'+name[i]+'</td>'+
        '<td style="border-right: 0px; width:100px; text-align:left" id="ProductProduct'+k+'" name="data[Product][Product]['+k+']">'+model[i]+'</td>'+
       '</tr>'; 
   }
  } 
  output = '<table style="width:500px; border: 0px;">'+output+'</table>';   
  document.getElementById('productTable').innerHTML = output;
}     
</script>

Answer 1

You need some kind of repeated AJAX check in your page to see if there is new data in the database. You can do this using setTimeout or setInterval.

E.g.

function CheckData() {
    List();
    setTimeout(CheckData, 10000);
}