refreshing a div without refreshing the entire page

Question

This is my code

<!doctype html>
<html>
 <head>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <style>
   *{padding:0px; margin:0px;}
   #output{width:850px; height:400px; background-color:#E0F5CD; margin:auto;}
   #tbl{position:relative; top:30px;}
  </style>
 </head>
 <body>
  <div id="output"></div>
  <script id="source" language="javascript" type="text/javascript">
   $('#output').append("<br /><h3><center>Employee Table</center></h3>");
   $.ajax({                                      
    url: 'ajax_db.php', data: "", dataType: 'json', success: function(rows)       
     {
      for (var i in rows)
       {
        var row = rows[i];
        var employee_name = row[1];
        var email = row[2];
        var message = row[3];
        var date = row[4];
        $('#output').append(
                    "<table  border=1 width='850' id='tbl'border=1 width='850' id='tbl'>" +
                       "<tr>" +
                         "<td width='25%'>" + employee_name + "</td>" +
                         "<td width='25%'>" + email + "</td>" +
                         "<td width='25%'>" + message + "</td>" +
                         "<td width='25%'>" + date + "</td>" +
                        "</tr>" +
                    "</table>");
       }
     }
   });
  </script>

  <script>

  </script>
 </body>
</html>

I want a code which loads only a div with id #output, without loading the entire page. The div must automaticaly get refreshed every 2 second. I have called api.php which consists of data extraction from database, that shows 5 rows. If I delete one row, updated data must be shown after 2 seconds. This is my code ajax_db.php

<?php 
  mysql_connect("localhost", "root", "root") || die(mysql_error());
  mysql_select_db("bijit") || die(mysql_error());
  $result = mysql_query("SELECT * FROM employee ORDER BY id DESC LIMIT 5");
  $data = array();
  while ( $row = mysql_fetch_row($result) )
   {
    $data[] = $row;
   }
  echo json_encode( $data );
?>

Please suggest me the simplest code.

this might help: http://stackoverflow.com/questions/5611746/jquery-ajax-load-certain-div — Yaje, Jan 04 '17 at 06:26
It looks like your already doing most of the things needed for this. Just add a timer. — Ouroborus, Jan 04 '17 at 06:28
You may find `$.load()` a little simpler than `$.ajax()` also. — John Hascall, Jan 04 '17 at 06:32

elfan · Answer 1 · 2017-01-04T08:34:02.530

I just modified your code a little bit. I change the first append() with html(), and put everything in a function so that we can call it every 2 seconds.

<script id="source" language="javascript" type="text/javascript">
   (function refresh() {
       $("#output").html("<br /><h3><center>Employee Table</center></h3>");
       $.ajax({                                      
         url: 'ajax_db.php', data: "", dataType: 'json', success: function(rows) {
           for (var i in rows) {
             var row = rows[i];
             var employee_name = row[1];
             var email = row[2];
             var message = row[3];
             var date = row[4];
             $("#output").append("<table  border=1 width='850' id='tbl'>" +
                       "<tr>" +
                     "<td width='25%'>" + employee_name + "</td>" +
                     "<td width='25%'>" + email + "</td>" +
                     "<td width='25%'>" + message + "</td>" +
                     "<td width='25%'>" + date + "</td>" +
                    "</tr>" +
                    "</table>");
           }
         }
      });
      setInterval(refresh, 2000);
   })();
</script>

thank u very much. It works now, but it worked after I used setInterval instead of setTimeout — Birju, Jan 04 '17 at 07:56

score 0 · Answer 2 · answered Jan 04 '17 at 06:35

0

You may need to get new data every two seconds,

function explode(){

  ///......your ajax load function and append code here

}
setTimeout(explode, 2000);

answered Jan 04 '17 at 06:35

manny

1,878
2
15
31

refreshing a div without refreshing the entire page

2 Answers2