Automatically Load Content and Refresh Div Using jQuery

Pritty June 2, 2016 jQuery, PHP, Web Development Leave a comment 592 Views

Good Morning Guys,
Automatically reload and displaying the content without reloading the page is very important in web application. Specially this technique is used in news or magazine website for latest news, organization website, banking site for notification etc. You can directly display content in your website from database and automatically change it after fixed interval of time. There are times when you need to refresh some part of your web page in a specific interval of time (I recommend three seconds).

This tutorial teaches you how to load contents from an external page or file into your current page and refreshes these contents every 3 seconds with the help of PHP and Jquery.

Let’s see how you can achieve this:

Main part of this tutorial is the jQuery code. This is very simple:

<script>
function show_data()
{
	$('.show_content').load('datas.php').fadeIn(1000);
}
setInterval('show_data()', 3000);
</script>

function show_data()

{

$('.show_content').load('datas.php').fadeIn(1000);

}

setInterval('show_data()', 3000);

</script>

datas.php file is responsible for what data is to be displayed.
You can either fetch data from any file or database tables.

Code for datas.php

<?php
$i_1="<li><a href='http://prittytimes.com/secure-login-page-using-php-and-mysql-based-on-user-role/'>Secure Login page using PHP and MYSQL based on user role
</a></li>";
$i_2="<li><a href='http://prittytimes.com/ajax-upload-and-resize-an-image-with-php/'>Ajax Upload and Resize an Image with PHP</a></li>";
$i_3="<li><a href='http://prittytimes.com/facebook-style-background-image-upload-and-position-adjustment/'>Facebook Style Background Image Upload and Position Adjustment</a></li>";
$i_4="<li><a href='http://prittytimes.com/how-to-manually-reset-your-wordpress-admin-password/'>How to Manually Reset Your WordPress Admin Password</a></li>";
$i_5="<li><a href='http://www.infotuts.com/secure-registration-form-php-pdo/'>Create Simple But Secure Registration form in PHP using PDO</a></li>";
$display_content = array(
$i_1=>1, 
$i_2=>2,
$i_3=>3,
$i_4=>4,
$i_5=>5
);
 print_r(array_rand($display_content,1));
 
?>

<?php

$i_1="<li><a href='http://prittytimes.com/secure-login-page-using-php-and-mysql-based-on-user-role/'>Secure Login page using PHP and MYSQL based on user role

</a></li>";

$i_2="<li><a href='http://prittytimes.com/ajax-upload-and-resize-an-image-with-php/'>Ajax Upload and Resize an Image with PHP</a></li>";

$i_3="<li><a href='http://prittytimes.com/facebook-style-background-image-upload-and-position-adjustment/'>Facebook Style Background Image Upload and Position Adjustment</a></li>";

$i_4="<li><a href='http://prittytimes.com/how-to-manually-reset-your-wordpress-admin-password/'>How to Manually Reset Your WordPress Admin Password</a></li>";

$i_5="<li><a href='http://www.infotuts.com/secure-registration-form-php-pdo/'>Create Simple But Secure Registration form in PHP using PDO</a></li>";

$display_content = array(

$i_1=>1,

$i_2=>2,

$i_3=>3,

$i_4=>4,

$i_5=>5

);

print_r(array_rand($display_content,1));

Code for index.php

<html>
<head>
<title>Automatically Load Contents and Refresh Div using Jquery and Ajax</title>
<style type="text/css">
.main{
margin:auto;
font-size: 28px;
color: blue;
border: dotted 2px;
height: 70px;
width: 900px;
padding: 10px;
margin-bottom: 50px;
text-align: center;
}

.show_content{
font-size: 24px;
padding-top: 10px;
width: 800px;
margin: auto;
color: blue;
border: dotted 1px;
height: 80px;
text-align: center;
background-color: #E1E1D2;


}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>

function show_data()
{
	$('.show_content').load('datas.php').fadeIn(1000);
}
setInterval('show_data()', 3000);
</script>
</head>
<body>
<div class="main"><p>Automatically refresh div using jQuery -PrittyTimes</p></div>
<div class="show_content"></div>
</div>

</body>
</html>

<html>

<head>

<title>Automatically Load Contents and Refresh Div using Jquery and Ajax</title>

.main{

margin:auto;

font-size: 28px;

color: blue;

border: dotted 2px;

height: 70px;

width: 900px;

padding: 10px;

margin-bottom: 50px;

text-align: center;

}

.show_content{

font-size: 24px;

padding-top: 10px;

width: 800px;

margin: auto;

color: blue;

border: dotted 1px;

height: 80px;

text-align: center;

background-color: #E1E1D2;

}

</style>

function show_data()

{

$('.show_content').load('datas.php').fadeIn(1000);

}

setInterval('show_data()', 3000);

</script>

</head>

<body>

<div class="main"><p>Automatically refresh div using jQuery -PrittyTimes</p></div>

</div>

</body>

</html>

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.