Reload DIV without reloading the whole page

Question

I have a div tag that contains php to populate this div with information; I want to make the page invoked every 15 seconds so that it can update the information there without reloading the entire web page. I tried to do this using JavaScript / jQuery and I just can't get it to work.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> var auto_refresh = setInterval( function () { $('.View').load('Small.php').fadeIn("slow"); }, 15000); // refresh every 15000 milliseconds </script> <div class="View"><?php include 'Small.php'; ?></div> 

this is what I got after the search, and what happens, it loads Small.php, but does not update it or does not update the information every 15 seconds.

Please, help!

I have to add all my php arrays that should be displayed, they all execute in Small.php, and the page that I include is simply isolated.

EDIT: what no one noticed was that my first jQuery script link did not have a closing tag, and that broke my second script. after adding to the correct closing tag, finally the script worked, but fadeIn does not display properly without using fadeOut first.

Answer 1

Your code works, but fadeIn not, because it is already visible. I think the effect you want to achieve is: fadeOut - 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 mentioned in Khanh TO, you may need to get rid of the browser’s internal cache. You can do this with $.ajax and $.ajaxSetup ({ cache: false }); or the random hack he was talking about.

Answer 2

try it

 <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> 

Answer 3

Your html is not updated every 15 seconds. The reason may be browser caching. Add Math.random() to avoid browser caching , and it is better to wait until the DOM is fully loaded, as @shadow pointed out. But I think the main reason is 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> 

Answer 4

The code you use will also include the fadeout effect. Is this what you want to achieve? If not, it might make sense to simply add the following INSIDE "Small.php".

 <meta http-equiv="refresh" content="15" > 

This adds an update every 15 seconds to the small.php page, which should mean that if you call PHP to another page, only this "frame" will reload.

Let us know if this worked or resolved your problem !?

-Brad

Answer 5

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" /> <div class="View"><?php include 'Small.php'; ?></div> <script type="text/javascript"> $(document).ready(function() { $('.View').load('Small.php'); var auto_refresh = setInterval( function () { $('.View').load('Small.php').fadeIn("slow"); }, 15000); // refresh every 15000 milliseconds $.ajaxSetup({ cache: true }); }); </script>