Question

I made this script to get some json information:

 $(document).ready(function(){

    $.ajax({
      url: 'url',
      dataType: 'json',
      cache: true,
      timeout: 30000,
      success: function(data) {

            // $('#output ul').append('<li>The feed loads fine');
            $('#output ul').empty();

            $.each(data.posts, function(i,data){ 

                $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>');


            });

        },
        error: function(){
            $('#output ul').append('<li>Error');
        }
    });
 });

But i want to update the feed every x seconds. I read a lot about it but i can get it done.

How can i do this?

Answer 1

Use setInterval to repeated call the code block, and put your code in some function and pass the function name to setInterval first parameter. You can pass anonymous function instead of making a new function like repeatMe but I would prefer making function to make the code more readable.

function repeatMe(){
 $.ajax({
  url: 'url',
  dataType: 'json',
  cache: true,
  timeout: 30000,
  success: function(data) {

        // $('#output ul').append('<li>The feed loads fine');
        $('#output ul').empty();

        $.each(data.posts, function(i,data){ 

            $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>');


        });
    },
    error: function(){
        $('#output ul').append('<li>Error');
    }
 });
}

setInterval(repeatMe, 5000);

Edit It would be better to use setTimeout instead of setInterval in the success to send the next call for update after the first has finished its job. We will also put setTimeout in error to keep the repetive call for update.

function repeatMe(){
 $.ajax({
  url: 'url',
  dataType: 'json',
  cache: true,
  timeout: 30000,
  success: function(data) {
        // $('#output ul').append('<li>The feed loads fine');
        $('#output ul').empty();
        $.each(data.posts, function(i,data){ 

            $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>');
            setTimeout(repeatMe, 5000);
        });
    },
    error: function(){
        $('#output ul').append('<li>Error');
        setTimeout(repeatMe, 5000);
    }
 });
}