AJAX jQuery refresh div every 5 seconds

Question

I got this code from a website which I have modified to my needs:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>

<div id="links">

</div>

<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 5000);

function reloadChat () {
$('#links').load('test.php #links',function () {
        $(this).unwrap();
        timeout = setTimeout(reloadChat, 5000);
});
}
</script>

In test.php:

<?php echo 'test'; ?>

So I want test.php to be called every 5 seconds in links div. How can I do this right?

you are using an old version ogf jquery , try the latest version — Kanishka Panamaldeniya, Aug 22 '14 at 12:22
AJAX polling is an anti-pattern which should be avoided at all costs. It's not a scalable solution and will cause server-side performance problems with minimal concurrent load. A better solution when you need to keep client/server side data in close sync is to use the observer pattern instead. In this case, websockets. — Rory McCrossan, Jan 07 '20 at 10:50

Yunus Aslam · Accepted Answer · 2014-08-22T12:26:41.310

59

Try this out.

function loadlink(){
    $('#links').load('test.php',function () {
         $(this).unwrap();
    });
}

loadlink(); // This will run on page load
setInterval(function(){
    loadlink() // this will run after every 5 seconds
}, 5000);

Hope this helps.

edited Aug 22 '14 at 12:26

answered Aug 22 '14 at 12:08

Yunus Aslam

2,447
4
25
39

1

Updated my answer with $(this).unwrap(); In this you wont need the timeout = setTimeout(reloadChat, 5000); – Yunus Aslam Aug 22 '14 at 12:15
It's not working, is http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js the right library? – user3838972 Aug 22 '14 at 12:20
Oh wait it's working, thanks :) but "test" comes 5 seconds after pageload, is the way to do it instant onload and then refresh every 5 sec? – user3838972 Aug 22 '14 at 12:23
Great now it's perfect :) Thanks – user3838972 Aug 22 '14 at 12:29
TIL `unwrap()` is a thing. Thank lord. – Daan Nov 18 '15 at 08:54
Great stuff! But what about counting the page loads. Setting a counter variable that increments every 5 seconds (or every second)? – Razvan Zamfir Nov 22 '16 at 09:54
But this will hit the server every 5 seconds. so my server will become busy unnecessary for every 5 sec – rupesh Sep 05 '17 at 05:26
1

@rupesh can you please tell some other way to fetch fresh data from server without sending request to server? If the requirement is to refresh after every 5 seconds. Thank You! – Yunus Aslam Sep 07 '17 at 05:22

Kanishka Panamaldeniya · Answer 2 · 2014-08-22T12:20:13.723

7

Try using setInterval and include jquery library and just try removing unwrap()

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

var timeout = setInterval(reloadChat, 5000);    
function reloadChat () {

     $('#links').load('test.php');
}
</script>

UPDATE

you are using a jquery old version so include the latest jquery version

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

edited Aug 22 '14 at 12:20

answered Aug 22 '14 at 12:08

Kanishka Panamaldeniya

17,302
31
123
193

this script works but the first seconds there is no content in the div. can the content also load on page load ? – Bombelman Feb 15 '23 at 03:07

score 5 · Answer 3 · edited Jun 10 '18 at 10:18

5

Try to not use setInterval.
You can resend request to server after successful response with timeout.
jQuery:

sendRequest(); //call function

function sendRequest(){
    $.ajax({
        url: "test.php",
        success: 
        function(result){
            $('#links').text(result); //insert text of test.php into your div
            setTimeout(function(){
                sendRequest(); //this will send request again and again;
            }, 5000);
        }
    });
}

edited Jun 10 '18 at 10:18

Marco Di Francesco

35
1
4
14

answered Apr 28 '17 at 08:06

Dudar Mykola

89
1
2

1

could you please explain why not setInterval? – Tikky Dec 29 '17 at 07:58
this answer led to another answer https://stackoverflow.com/a/5052661/3842368 which suggests moving it from 'success' to 'complete'. Upvoted. – luke_mclachlan Feb 02 '18 at 17:40

score 3 · Answer 4 · answered Aug 22 '14 at 12:22

3

you can use this one.

<div id="test"></div>

you java script code should be like that.

setInterval(function(){
      $('#test').load('test.php');
 },5000);

answered Aug 22 '14 at 12:22

Maneesh Singh

555
2
12

score 3 · Answer 5 · edited Jan 23 '16 at 05:42

3

<script type="text/javascript">
$(document).ready(function(){
  refreshTable();
});

function refreshTable(){
    $('#tableHolder').load('getTable.php', function(){
       setTimeout(refreshTable, 5000);
    });
}
</script>

edited Jan 23 '16 at 05:42

Mayank Patel

3,868
10
36
59

answered Jan 23 '16 at 05:38

Elamparuthi

31
1

AJAX jQuery refresh div every 5 seconds

5 Answers5

Linked

Related