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 i.e 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.76miles.com/'/>";
Now your page is ready .
Click here to see the demo.
Matias Lecaros
May 30, 2010
Dude, you’ve just given me the perfecto solution for what I wanted to do, :D.
Greetings from Chile
:D
restroika
June 17, 2010
Thanks… very use full
revelation
July 12, 2010
wow that was great!! thanks , this very useful!
chipowski
July 14, 2010
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.
chipowski
July 14, 2010
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
Shaun
September 4, 2011
What was it you had to change to do this?
usmcguy
September 14, 2011
chipowski, what exactly did you have to add to make the page load immediately? You said you added a require, but I’m not sure what you meant. Sorry, I know this is an old post.
boris
October 13, 2010
with small modification this was exactly what i needed!
just to refresh the div when another action not every 20 seconds.
Perfect good job!
Achyut
November 15, 2010
thanx, very cute
Ashwini
November 17, 2010
Thanks a lot…
Really helpfull…
Keep it up…
sharaz
January 6, 2011
thanksss.. really good one
moli
September 17, 2011
yes, thank
Peter
November 19, 2010
Great tutorial. Thanks.
Does anyone know how to refresh the div only once. I have a webform which I want to insert into my mysql DB, and then update the div automatically to show the just inserted comment. Or even better refresh if it detects a new comment in the DB.
vinoth
December 30, 2010
Thanks, this is very useful for my project
Vinay
February 2, 2011
Thanks buddy, because of u i started using jquery.. its quite easy to learn..
john
February 17, 2011
the example does not work
the div does not reload with the new information stored in the data base
lusozim
February 24, 2011
Hi, I know this thread is old but I thought I’d try my luck anyway. This code was precisely what I needed with one small drawback- it does not work in IE. It does of course work in safari, firefox and chrome in os x and windows. My php script outputs the name of an randomly selected image which is then displayed [via echo]. As I said this works perfectly except for in IE.
Has anyone else had this problem and found a solution?
Vivek
March 21, 2011
Well Done.This is what required.
Rohit
April 22, 2011
Thanks a lot for the code.. Worked perfectly..
akash
April 23, 2011
thank you very very very very very very very very very very very very very very very very much
vijay
May 25, 2011
Hi,
This post is very useful for me..thanks
DavidB
May 29, 2011
This workd fine in FF and Chrome. However in IE8 it does the first refresh to load the php file then, although it does further refreshes (the content fades in and out), the data stays the same. I looks like IE8 is cacheing the processed php file served from the server. Even a manual page refresh does not work – you have to close and reopen the page to get the new data. (My php file displays data from a text file on the server which is uodated every minute by FTP.)
Any suggestions?
Baggins
July 11, 2011
Add this to into de fuction:
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
This worked to me…
Eduardo
September 17, 2011
Thanks!!!!!!!!!!!!
Ruxandra
January 9, 2012
Hi, for me the fix does not work: it does not refresh the image i am reading, even though it fades in and out. on manual refresh it does change the image from the server, but with the function the image stays the same.
many thanks for any feedback
Ebrahim
June 15, 2011
Thank you so much……….
Vinod
June 23, 2011
Hi,
Thank u for post.using this i got my solution
JD
June 23, 2011
Wish I could say it was helpful, but for the program i’m working on, it doesn’t work
for some reason none of the tabs or buttons reload as tabas or buttons
it loads the content, and javascript runs (as is visible by console.log)
but none of the jquery specific layout stuff seems to “rework” after it reloads
polash
July 6, 2011
good job.thanks a lot
Kadri
August 8, 2011
Thanks alot for this! Very helpful and I was able to achieve the exact result I wanted :)
Precise
August 9, 2011
Yes I agree with DavidB! IE just refresh one… Second time calling PHP file doesnt effect anything..! need to close it and open it again.
ole
August 13, 2011
thank you it solved my problem i found small error in your code
$(‘#loaddiv’).fadeOut(‘slow’).load(‘reload.php’).fadeIn(“slow”);
changed it to
$(‘#loaddiv’).fadeOut(“slow”).load(‘reload.php’).fadeIn(“slow”);
“slow”
also i had to remove the
echo”
before it worked for me,
and in the end
“;
im using other version
jquery-1.5.1.min.js
best regards ole
Manoj
August 17, 2011
Thank you very much for this code snippet for which i was searching for.This is actually very precise but functionality worth code.Thank u very much
Mohan Chand Rath
September 20, 2011
Thanks, this is a very good thing and it is working properly. But when this page is refresh i want this refreshing page get some dynamic value from master page. How it will get data ?
DavidB
October 21, 2011
This works well. My query is about the syntax of the statement:
$(‘#loaddiv’).fadeOut(‘slow’).load(‘reload.php’).fadeIn(“slow”);
I haven’t seen this sort of sequential chaining of methods before but I am guessing it is equivalent to:
$(‘#loaddiv’).fadeOut(‘slow’);
$(‘#loaddiv’).load(‘reload.php’);
$(‘#loaddiv’).fadeIn(‘slow’);
I can’t find this syntax documented anywhere. Is it a Javascript or a JQuery syntax? In either case could anyone point me to some documentation that explains it. It isn’t explained in my Javascript manual.
June
November 11, 2011
good thing i found this.
I can use in my website actually 2 websites :)
rudy
November 17, 2011
thanks…
and how if i have different 2 pages
sample : reload.php and reload_2.php
and show must be loop
ManojDNemade
December 30, 2011
Great Work Boss…….
Lay Bhari….!!!
srijib
January 4, 2012
I want to inject a from the reload.php into the of current page rather than the complete page. i do i do that
RJ
January 9, 2012
Nothing else seems to have worked for me except this jquery. Only one problem. It works fine with the example img link given, but I can’t get it to work with my station’s “Now Playing” and “Up Next” scripts. Please Help!
taeiljun
January 25, 2012
here is the solution.
bla, bla, bla
bla, bla, bla // same tags div1
==================================
$(‘#div1′).html( $(‘#div1copy’).html() );
bala.p
February 22, 2012
why we should use that reload.php file. is it must?
Jamshid
March 15, 2012
Could you please send insert Data version with ajax and php
Eric
April 20, 2012
I’ve been hunting for this for some time. Thanks for posting. Great job!