Reload A DIV Without Reloading The Whole Page
Solution 1:
Your code works, but the fadeIn
doesn't, because it's already visible. I think the effect you want to achieve is: fadeOut
→ load
→ fadeIn
:
var auto_refresh = setInterval(function () {
$('.View').fadeOut('slow', function() {
$(this).load('/echo/json/', function() {
$(this).fadeIn('slow');
});
});
}, 15000); // refresh every 15000 milliseconds
Try it here: http://jsfiddle.net/kelunik/3qfNn/1/
Additional notice: As Khanh TO mentioned, you may need to get rid of the browser's internal cache. You can do so using $.ajax
and $.ajaxSetup ({ cache: false });
or the random-hack, he mentioned.
Solution 2:
try this
<script type="text/javascript">
window.onload = function(){
var auto_refresh = setInterval(
function ()
{
$('.View').html('');
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
}
</script>
Solution 3:
Your html is not updated every 15 seconds. The cause could be browser caching. Add Math.random()
to avoid browser caching, and it's better to wait until the DOM is fully loaded as pointed out by @shadow. But I think the main cause is the caching
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php?' + Math.random()).fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
});
</script>
Solution 4:
The code you're using is also going to include a fadeout effect. Is this what you want to achieve? If not, it might make more sense to just add the following INSIDE "Small.php".
<meta http-equiv="refresh" content="15" >
This adds a refresh every 15seconds to the small.php page which should mean if called by PHP into another page, only that "frame" will reload.
Let us know if it worked/solved your problem!?
-Brad
Post a Comment for "Reload A DIV Without Reloading The Whole Page"