How to load a part of page every 30 seconds

Question

Possible Duplicate:
jQuery Ajax request every 30 seconds

I know we can load a part of page on some event. I also know we can load whole web page every specified time, but I wanted to know how to load a part of page every 30 seconds.

If you use AJAX you can can call AJAX method using `setInterval()` function. https://developer.mozilla.org/En/Window.setInterval — antyrat, Jul 05 '12 at 10:15
@antyrat using `setInterval` with AJAX is a **very** bad idea. — Florian Margaine, Jul 05 '12 at 10:18
I dont want to use setinterval, as it unnecessary hit the server, even if there is no update. IS there any way so that once data is updated on server, it loads on my page. — Sapna Agrawal, Jul 05 '12 at 10:20
You could look into long poll ajax calls, which are ajax calls that wait for a long time, then timeout, then reconnect for a long time again, then get data, then reconnect etc. — Question Mark, Jul 05 '12 at 10:34
@SapnaAgrawal: You need to ask a new question for this. It is too different from your initial question. What you are looking for are WebSockets or COMET-style AJAX long polling. — ThiefMaster, Jul 05 '12 at 10:52

score 12 · Accepted Answer · answered Jul 05 '12 at 10:21

12

function refreshPage() {
    $.ajax({
        url: 'ajax/test.html',
        dataType: 'html',
        success: function(data) {
            $('.result').html(data);
        },
        complete: function() {
            window.setTimeout(refreshPage, 30000);
        }
    });
}

window.setTimeout(refreshPage, 30000);

Using setTimeout has the advantage that if the connection hangs for some time you will not get tons of pending requests since a new one will only be sent after the previous one finished.

answered Jul 05 '12 at 10:21

ThiefMaster

310,957
84
592
636

Dude there is no need of setTimeout second time – Jul 05 '12 at 10:24
3

@Random of course there is. You're relaunching the next ajax call right away otherwise. – Florian Margaine Jul 05 '12 at 10:26

472084 · Answer 2 · 2012-07-05T10:30:05.850

2

function load_content(){

    setTimeout(function(){

        $.ajax({
            url: 'ajax/example.html',
            dataType: 'html',
            success: function(data) {
                $('.result').html(data);
                load_content();
            }
        });dataType: 'html',

    },30000);

}

load_content();

edited Jul 05 '12 at 10:30

answered Jul 05 '12 at 10:15

472084

17,666
10
63
81

3

Using `setInterval` with AJAX is a **very** bad idea. – Florian Margaine Jul 05 '12 at 10:18
@FlorianMargaine How else would you do it? – 472084 Jul 05 '12 at 10:19
1

`setTimeout` and create a new timeout after the previous request was successful or failed (i.e. in the `complete` callback) – ThiefMaster Jul 05 '12 at 10:19
@FlorianMargaine please elaborate – JSantos Jul 05 '12 at 10:19
1

`setTimeout( function load() { $.ajax({ complete: function() { setTimeout( load, 30000 ); }) }, 30000 )` – Florian Margaine Jul 05 '12 at 10:20
@Jleagle your code is weird, but it does work :) Really weird tho. – Florian Margaine Jul 05 '12 at 10:24
@FlorianMargaine Made more sense to me this way around, as you only use setTimeout() once :) – 472084 Jul 05 '12 at 10:27

score 0 · Answer 3 · answered Jul 05 '12 at 10:57

jQuery has already a build in functionality to replace a element's content by a remote file, called load(). With load() you can use this oneliner:

window.setTimeout($('#refresh').load('/remote/content.html'), 30000);

#refresh is the id of the element to refresh, /remote/content.html is the remote content.

score -1 · Answer 4 · answered Jul 05 '12 at 10:38

-1

$(function() {
   setInterval(function() {
     getData();  // call to function
   }, 30000 );  // 30 seconds
});


// define your function here
function getData() {
   var url ="/mypage.php?type=load_data";
   var httpobj = $.ajax({url:url,async:false});  // send request
   var response = httpobj.responseText.trim(); //get response
   $('#myDiv').html(response);  // display data
}

answered Jul 05 '12 at 10:38

Sumith Harshan

6,325
2
36
35

1

Read the comments on all the other answers. Seriously. – Florian Margaine Jul 05 '12 at 10:40

score -2 · Answer 5 · answered Jul 05 '12 at 10:21

-2

If you are using jQuery you can use the load() method

setInterval(function(){

    $('#some-kinda-container').load('/some/kinda/url.html #bit-you-need');

}, 30000);

answered Jul 05 '12 at 10:21

Question Mark

3,557
1
25
30

See @Jleagle's answers' comments to see why it's a **very** bad idea to use `setInterval`. – Florian Margaine Jul 05 '12 at 10:21
if your ajax calls aren't completing in 30 seconds you have bigger things to worry about than setInterval – Question Mark Jul 05 '12 at 10:23
It's not about 30 seconds the first time, it's about remaining constant. If you need 2s to get the response, you'll overlap your requests in 5 minutes or so (didn't calculate, but you get the point) – Florian Margaine Jul 05 '12 at 10:25
There will only be overlap if the load() takes longer than 30 seconds surely? – Question Mark Jul 05 '12 at 10:32
No, there will be overlap after multiple requests, each one taking 2 seconds. 15 requests later, two requests will overlap each other. – Florian Margaine Jul 05 '12 at 10:39
Because `setInterval` doesn't wait for your request to finish. It will be run every 30 seconds, no matter what. – Florian Margaine Jul 05 '12 at 10:46
If you use SetTimeout then it will be 30 seconds plus 2 seconds fetch time so will definitely be out of sync and not what the op asked for, i don't understand your point i think, as setInterval will give you an ajax request after every x seconds no matter what the ajax delay, assuming the ajax delay is no longer than the interval there will be no overlap: http://jsfiddle.net/tDhGf/1/ – Question Mark Jul 05 '12 at 12:04

How to load a part of page every 30 seconds

5 Answers5

Linked