Simple Jquery Ajax Auto Refreshing DIV

From Zam Wiki
Revision as of 19:20, 26 May 2014 by Zam (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

I guess some of the people want to create a div that can update the table with out refreshing the page isn't it? So here I'll teach you on how to do this by using this 3 simple (not really simple I guess) file in PHP.

  • First, create 1 file for our config file
<?php
$db_host="localhost";	//Mysql Database Host Address
$db_user="user";	//Database Username
$db_pass="pass";	//Database Password
$db_name="database";	//Database Name
?>
  • Then, create another file named count.php
 <?php
 
 require "config.php";
 
 $db = mysql_connect($db_host, $db_user, $db_pass) or die(mysql_error());
 mysql_select_db($db_name) or die(mysql_error());
 
 $query = "SELECT * FROM events ORDER BY events.time DESC LIMIT 0 , 10";
 $result = mysql_query($query);
 
 print "
 	<style>
 		// Your CSS here
 	</style>
 
 <body>
 	<table border=1>
 		<tr>
 			<th>Time</th> // Your Table here
 		</tr>";
 
 		while($row = mysql_fetch_array($result))
 		{
 			echo "<tr><td>" . $row['time'] . "</td></tr>"; // Things that you want to fetch
 		}
 
 echo "
 	</table>
 </body>";
 
 mysql_close();
 ?>

This file will do the query to the database & parse the info gathered back to index.html

  • Create the main file named index.html
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('count.php');
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>

<div id="results">Loading data ...</div>

This file will show the data that have been query from count.php & parsed at div #results

blog comments powered by Disqus