Make Auto Load And jQuery Refresh Page Div Every 10 Seconds

By following this post you gonna make jQuery Refresh Page or jQquery Refresh Div in every 10 seconds which works in auto mode. You can make it with jquery refresh div content using some source codes like HTML & PHP.

I will give you two kind of example for you here. You can be seen this portion in Twitter Search And Facebook. In these social sites, you can find most recent tweets and posts count form the database within ever 10 seconds. It counting from the top of the page. You can develop like this with jQuery and Ajax with simple codes.

Read More Similar Article: 
1. Using Jquery File Upload: Ajax Image Upload Without Refreshing
2. Facebook Widget For Website: Place Your Facebook Page Widget
3. Login Page In PHP: How To Create PHP Login Form
4. How To Check if WiFi is connected Or Disconnected
5. How To Run Computer Management MSC & Some Useful Run Commands
jQuery Refresh Page, jQuery Refresh Div Every 10 Seconds

Auto Load & Refresh Div With jQuery In Every 10 Seconds

So, let's see how can you build the program is jQuery refresh page div in every 10 seconds which works automatically.

Example 2:

Index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php?q=<?php echo $search_word; ?>').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<body>
<div id="load_tweets"> </div>
</body>

</script>

record_count.php
<?php
include("db.php");
$search_word=$_GET['q'];
$sql = mysqli_query($db,"Select id form Messages where message 
LIKE '%$search_word%'");
$record_count=mysqli_num_rows($sql);
//Display count.........
echo $record_count;
?>

db.php
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Example 1:

index.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<body>
<div id="load_tweets"> </div>
</body>

</script>

record_count.php
Just printing "Megaupdate24 | programming & Tech Blog" every 10 seconds
<?php
echo "Megaupdate | Programming Blog & Tech..............";
?>

Hopefully, Now you can clear about how to make autoload and jQuery refresh page div which loading automatically in every 10 seconds.

About Luthfar Rahman

I am Luthfar Rahman is the founder of Megaupdate24. I am a Computer Science Engineer, Online Marketer, and Public Speaker. Like to traveling and have been blogging last 7 years. Follow me on Facebook, Google+ and Twitter.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment