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
$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
 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 "
 		// Your CSS here
 	<table border=1>
 			<th>Time</th> // Your Table here
 		while($row = mysql_fetch_array($result))
 			echo "<tr><td>" . $row['time'] . "</td></tr>"; // Things that you want to fetch
 echo "

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=""></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() {
}, 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