CODEWITHSUNDEEP
javascriptphpjqueryajax
Robert Dickey
Robert Dickey

Reputation: 834

Looping Ajax call

I have a simple Ajax call and for some reason I am unable to get the call to refresh the data properly.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    var myFunction = $(document).ready(function(){
      $("#div1").load("feeds.php");
    });
    setInterval(myFunction, 1000);
    </script>
  </head>
  <body>

  </body>
</html>

If I cut out of my attempt at an interval, It loads, but only once.

$(document).ready(function(){
  $("#div1").load("feeds.php");
});

Any ideas where I am going on? My understanding of Ajax is a work in progress.

Thanks!

Upvotes: 1

Views: 71

Answers (3)

Taplar
Taplar

Reputation: 24965

I would suggest something like the following instead of using setInterval.

jQuery(function($){
  //name the method to recursively call it, and invoke it immediately
  (function refreshFeeds(failureCount){
    //if the load failed 5 times in a row, stop trying, something is wrong
    if (failureCount < 5){
      $('#div1').load('feeds.php').then(function success(){
        //request was good, reset failures and execute again after a second
        setTimeout(function(){ refreshFeeds(0); }, 1000);
      }, function error(){
        //request was bad, increment the failure count and execute again after a second
        setTimeout(function(){ refreshFeeds(failureCount + 1); }, 1000);
      } );
    } else {
      console.log('Feeds failed to load 5 times.  Terminating request loop.');
    }
  })(0);
});

Upvotes: 1

Jaromanda X
Jaromanda X

Reputation: 1

$(document).ready(...) returns a jQuery object - so it can't be used as the argument to setInterval, which expects a function as it's first argument

Your code needs to be written

$(document).ready(function() {
    function myFunction(){
        $("#div1").load("feeds.php");
    }
    setInterval(myFunction, 1000);
});

or even

function myFunction(){
    $("#div1").load("feeds.php");
}
$(document).ready(function() {
    setInterval(myFunction, 1000);
});

This way, myFunction is globally visible

You also need to have an element with id=div1 for this code to work

so: the whole thing looks like

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        function myFunction(){
            $("#div1").load("feeds.php");
        }
        $(document).ready(function() {
            setInterval(myFunction, 1000);
        });
    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

Upvotes: 2

dave
dave

Reputation: 2936

You're calling your function on the $(document).ready() event, which will be called only once when the DOM is loaded. You don't need that part.

var myFunction = function(){
    $("#div1").load("feeds.php");
};

Or, the more common syntax

function myFunction(){
    $("#div1").load("feeds.php");
};

Upvotes: 0

Related Questions