settimeout not working correctly in ajax call

Question

I am developing a small web application. I have pretty much finished the server side code, but am struggling with the client side javascript.

I have an html file that is updated every second. This file is fully static and I use it only for log purposes.

The idea is to do pretty much the same thing, but with an auto update done on the client side.

For that I want to use database polling using ajax.

I have implemented a first version here, that simply prints the same html file and is supposed to reload it every second.

The thing is that is doesn't update, even though I don't see any error in my javascript console client side. The file is found, as it loads correctly and I don't see any reason why it wouldn't update my div.

Here is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Using Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        (function worker() {
          $.ajax({
            url : 'http://jlengrand.pythonanywhere.com/static/leader.html',
            success: function(data) {
              $('.text').html(data);
            },
            complete: function() {
              setTimeout(worker, 1000);
            }
          });
        })();
    </script>
</head>
<body>
    <div class="text">
        To be loaded <br />
    </div>
</body>
</html>

I tried locally (but with a smaller file) and it worked fine.

I know that reloading the whole file is not clever, but I want to build incrementally as this is the first time I develop in JavaScript.

What am I missing?

I see the need for jQuery .Deferred here perhaps? snip here:jsfiddle.net/ehynds/JSw5y — Mark Schultheiss
– Mark Schultheiss, Commented Feb 1, 2013 at 18:34

Soroush Falahati · Accepted Answer · 2013-02-01 19:11:50Z

7

Error: useless setTimeout call (missing quotes around argument?)

You run worker inside setTimeout. You need to remove () or you need to put it in '':

setTimeout(worker, 1000);

or

setTimeout('worker()', 1000);

*Edit: To prevent caching, change url to:

 url : 'http://jlengrand.pythonanywhere.com/static/leader.html?rand='+Math.random(),

edited Feb 1, 2013 at 19:11

answered Feb 1, 2013 at 18:24

Soroush Falahati

2,3272 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jlengrand Over a year ago

setTimeout(worker, 1000); is what i have on my webpage. I added () while trying to debug

Soroush Falahati Over a year ago

@jlengrand, Ok then update your html file at your server too.

jlengrand Over a year ago

It is. jlengrand.pythonanywhere.com/static/index.html :). Or am I missing something?

Soroush Falahati Over a year ago

It works for me after removing (). try installing tamper data on firefox and see it yourself.

Soroush Falahati Over a year ago

@jlengrand or select something and you can see your selection go away each 3 sec. Mean div updated.

|

Alex Loiz · Accepted Answer · 2013-02-01 18:36:43Z

3

It seems like you are not calling the worker function on document ready. Therefore the loop does not get initiated. Bear in mind that if you are calling a file located on a different domain you will face cross domain issues.

Check this code, it may solve your problem:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <!-- Using Google CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
       worker();
    });

    function worker(){
        $.ajax({
            url: 'http://jlengrand.pythonanywhere.com/static/leader.html',
            success: function(data) {
                console.log(data);  
                $('.text').html(data);
            },
            complete: function() {
                  setTimeout(worker(), 1000);
            }
        });
    }
   </script>
 </head>
 <body>
   <div class="text">
       To be loaded <br />
   </div>
</body>
</html>

answered Feb 1, 2013 at 18:36

Alex Loiz

1431 gold badge1 silver badge7 bronze badges

1 Comment

Soroush Falahati Over a year ago

This is a big problem but not his problem, because it is an ajax call and there is little chance to complete before completion of whole page.

Jai · Accepted Answer · 2013-02-01 18:39:53Z

2

Every thing is correct but doc ready is missing:

$(function(){
    (function worker() {
      $.ajax({
        url : 'http://jlengrand.pythonanywhere.com/static/leader.html',
        success: function(data) {
          $('.text').html(data);
        },
        complete: function() {
          setTimeout(function(){ // use this way
             worker();
          }, 1000);
        }
      });
    })();
});

answered Feb 1, 2013 at 18:39

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2013-02-01 18:53:20Z

0

Alternate solution to reload 1 second after the last load using Deferred

function getData() {
    $.ajax({
        url: 'http://jlengrand.pythonanywhere.com/static/leader.html',
        success: function (data) {
            $('.text').html(data);
        },
        complete: function () {}
    });
}

function showDiv() {
    var dfd = $.Deferred();
    $('.text').fadeTo(1000, 1, dfd.resolve);
    return dfd.promise();
}

function startme() {
    $.when(getData(), showDiv())
        .then(function (ajaxResult) {
        // ‘ajaxResult’ is the server’s response
            startme();
    });
};
startme();

answered Feb 1, 2013 at 18:53

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Collectives™ on Stack Overflow

settimeout not working correctly in ajax call

4 Answers 4

9 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related