4
How to refresh DIV using jquery
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.
62 Comments to “How to refresh DIV using jquery”
Leave a comment
Sign up for our mailing list.
Categories
Recent Comments
- Shankar on 8 Best WordPress Video Plugins
- Shankar on 5 Cool Video plugins for WordPress
- irshad on Creating Secure Login in PHP
- jaliya on How to refresh DIV using jquery
- anika on How to insert twitter updates in your webpage
How to refresh DIV using jquery: Jquery , magic in web programming ,have allowed us to use different features with… http://bit.ly/8FIaAq
RT @designgala: How to refresh DIV using jquery http://bit.ly/6YpGWl #jQuery #tutorials
[...] This post was mentioned on Twitter by designgala, WordPress Rocker. WordPress Rocker said: RT @designgala: How to refresh DIV using jquery http://bit.ly/6YpGWl #jQuery #tutorials [...]
How to refresh DIV using #jquery http://ow.ly/SCmK #webdev #tech
RT @designgala: How to refresh DIV using jquery http://bit.ly/6YpGWl
Dude, you’ve just given me the perfecto solution for what I wanted to do, :D.
Greetings from Chile
:D
Thanks… very use full
wow that was great!! thanks , this very useful!
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.
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
What was it you had to change to do this?
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.
[...] How to refresh DIV using jquery [...]
with small modification this was exactly what i needed!
just to refresh the div when another action not every 20 seconds.
Perfect good job!
thanx, very cute
Thanks a lot…
Really helpfull…
Keep it up…
thanksss.. really good one
yes, thank
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.
[...] [...]
[...] [...]
How to refresh DIV using jquery : http://1r.hu/wv
Thanks, this is very useful for my project
Thanks buddy, because of u i started using jquery.. its quite easy to learn..
How to refresh DIV using #jquery http://t.co/W1Go8C7 #tips #ajax
the example does not work
the div does not reload with the new information stored in the data base
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?
Well Done.This is what required.
How to refresh DIV using jquery: http://bit.ly/faQYbq
How to refresh DIV using jquery: http://bit.ly/hLfohv
Thanks a lot for the code.. Worked perfectly..
thank you very very very very very very very very very very very very very very very very much
Hi,
This post is very useful for me..thanks
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?
Add this to into de fuction:
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
This worked to me…
Thanks!!!!!!!!!!!!
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
Thank you so much……….
Hi,
Thank u for post.using this i got my solution
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
good job.thanks a lot
Thanks alot for this! Very helpful and I was able to achieve the exact result I wanted :)
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.
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
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
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 ?
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.
good thing i found this.
I can use in my website actually 2 websites :)
thanks…
and how if i have different 2 pages
sample : reload.php and reload_2.php
and show must be loop
Great Work Boss…….
Lay Bhari….!!!
I want to inject a from the reload.php into the of current page rather than the complete page. i do i do that
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!
here is the solution.
bla, bla, bla
bla, bla, bla // same tags div1
==================================
$(‘#div1′).html( $(‘#div1copy’).html() );
why we should use that reload.php file. is it must?
Could you please send insert Data version with ajax and php
I’ve been hunting for this for some time. Thanks for posting. Great job!
This is what I needed. Thanks for sharing. More power
Great
Complete code used by me (all credit to you and Baggins ……….for solution to ie
$(document).ready(function(){
$(‘#loaddiv’).show();
$(‘#loaddiv’).load(‘reload.php’);
});
var auto_refresh = setInterval(
function()
{
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
$(‘#loaddiv’).fadeOut(‘slow’).load(‘reload.php’).fadeIn(“slow”);
}, 20000);
Thank you very much. Keep doing the good work. This helps teachers like me in developing their own websites and tests. Thanks a ton!
thanks a lot its very usefull
i change $(‘#loaddiv’).load(‘reload.php’) –> load(“http://www.google.com”) but it doesn’t work. Why ?
Thank you vary Much