javascript - Reload a DIV without reloading the whole page

Question

I have a Div Tag that has a php include to fill that div with information what I want to do is make it so that the page is called every 15s so it can update the information there without having to reload the whole webpage. I've tried to do this with JavaScript/jQuery and I just can't seem to 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 have after searching some, and what happens is, it loads the Small.php but it doesn't refresh it or update the info every 15 seconds.

please help!

I should add all my php arrays that should show up are all executed in the Small.php and the page I'm including it into is just so it's isolated.

EDIT: What No One noticed was that my first script referencing jQuery did not have a closing tag, and that was breaking my second script. after adding in a proper closing tag, the script was finally working, but the fadeIn does not show properly without first using a fadeOut.

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