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.

Please search before posting a question.. its a duplicate of - http://stackoverflow.com/questions/10427573/refresh-div-with-jquery — Yashankit Vyas, Sep 14 '13 at 07:57
what var auto_refresh? you're not using it anywhere, just call setInterval, don't assign it to a variable you never use. — Bryan, Sep 14 '13 at 07:58

kelunik · Accepted Answer · 2015-03-23T14:04:28.587

10

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.

edited Mar 23 '15 at 14:04

answered Sep 14 '13 at 08:00

kelunik

6,750
2
41
70

I see this sort of working in jsfiddle but it doesn't work like that for me, is the jsfiddle supposed to show the text inside that div or "{}" and for my document am I supposed to replace /echo/json/ with Small.php or leave it the way it is? – Fate Averie Sep 14 '13 at 08:19
Yes, you replace /echo/json/ with your Small.php, it's only to have ajax-support in jsfiddle. – kelunik Sep 14 '13 at 08:47
After Realizing my mistake in my coding of the page with this script it finally works, I'm accepting this one here because without the fadeOut it doesn't seem to refresh right, though I added the math.random into it as well. My actual problem was that the javascript reference to jQuery was not closed properly and it ended up ignoring my reload script – Fate Averie Sep 14 '13 at 17:17

score 7 · Answer 2 · answered Sep 14 '13 at 07:56

7

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>

answered Sep 14 '13 at 07:56

Voonic

4,667
3
27
58

Khanh TO · Answer 3 · 2013-09-14T08:08:31.940

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>

score 0 · Answer 4 · answered Sep 14 '13 at 08:16

0

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

answered Sep 14 '13 at 08:16

Brad Andrews

106
1
1
11

1

this actually ends up reloading the whole page, and if you force your browser to ask before allowing refresh it doesn't work unless someone allows the refresh – Fate Averie Sep 14 '13 at 08:31
Really? As far as I knew this always worked for me in the past when trying to do similar things. I think last time I used an iframe instead of php include, would that make a difference to @OP? – Brad Andrews Sep 14 '13 at 08:34
I think this would refresh just an iframe but not a div on a page. – rfoo Sep 14 '13 at 09:45
If you use this code then whole page will be load but question is about to reload only single div on page. – Tell Me How Dec 21 '16 at 05:05

score 0 · Answer 5 · answered Sep 14 '13 at 10:41

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

Reload a DIV without reloading the whole page

5 Answers5

Linked