Refreshing DIV using jquery

Posted: November 24, 2010 in HTML, jQuery, PHP
Tags: , ,

There are very simple steps to achieve this:
Step 1:
Copy the following code and paste it in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
 <script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.

Step 2:
and now you need to put the div in the body section of your page

<div id="loaddiv">
</div>

Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.

echo"this auto loaded content ";

Now your page is ready.Enjoy it. 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s