How to refresh DIV using jquery

January 4, 2010 | by Rabi Shrestha

ref
Jquery; magic in web programming, have allowed us to use different features with the simple knowledge to use them. I was searching for basic code to refresh the specific DIV using jquery and found this article and like to share with my viewers.
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"<img src='http://www.nepalstock.com/datanepse/realindex.php'/>";

Now your page is ready .
Click here to see the demo.

5 Comments

Matias Lecaros
May 30, 2010 at 8:23 pm

Dude, you’ve just given me the perfecto solution for what I wanted to do, :D.

Greetings from Chile

:D

Reply
restroika
June 17, 2010 at 3:55 am

Thanks… very use full

Reply
revelation
July 12, 2010 at 6:40 am

wow that was great!! thanks , this very useful!

Reply
chipowski
July 14, 2010 at 11:33 am

thanks exactly what i’ve been looking for.

can you tell me how it would be modified to load the php straight away. i want my div to be a database refresh so would like the data to be displayed as soon as the page loads up initially.

Reply
chipowski
July 14, 2010 at 11:49 am

ignore my last post, just figured it out.
i just put a require statement in the div to load the php file initially and then when the reload happens the contents are overwritten.

absolutely perfect now.
thanks very much for code

Reply