how to refresh dynamically generated divs using ajax?

Question

I am generating dynamic divs and need to refresh them every 10 seconds. Earlier I used meta refresh but didn't like the flickering of page. I have tried to insert the ajax code but got failed.

below is my code without ajax,please tell me how and where to insert the ajax refresh code.

$(document).ready(function (){
    var n = 9;
    for(var i=0; i<n; i++){
        var div = document.createElement('div');
        div.className = "d5";
        div.id=i+1;
        // alert(div.id);
        document.getElementById('container').appendChild(div);
        $.ajax({ 
            async    : false,                                      
            url      : 'myapi.php',    //the script to call to get data          
            data     : "",             //you can insert url argumnets here to pass to api.php for example "id=5&parent=6"
            dataType : 'json',         //data format      
            success  : function(data){ //on recieve of reply
                var Name       = data[2];
                var subdomain  = data[15];
                var uniqueid   = data[1];
                var shop_photo = data[3];
                var offer      = data[19]; //get id
                //var vname    = data[1];  //get name
                //$('#'+div.id).html("<a href='http://www."+subdomain+".shoppinonline.com'>"+Name+"</a>"); 
                //$('#'+div.id).html("<img class='shopperspic' src='b2b/shop_image/"+uniqueid+"/"+shop_photo+"' alt='' /><a href='http://www."+subdomain+".shoppinonline.com'>"+Name+"</a><br>Special Offer<br><p>"+offer+"</p>");
                if(offer == ""){
                    $('#'+div.id).html("<div class='div1'><img class='shopperspic' src='b2b/shop_image/"+uniqueid+"/"+shop_photo+"' alt='' /></div><div class='div2'><a href='http://www."+subdomain+".shoppinonline.com'>"+Name+"</a></div></div>");
                }else{
                    $('#'+div.id).html("<div class='div1'><img class='shopperspic' src='b2b/shop_image/"+uniqueid+"/"+shop_photo+"' alt='' /></div><div class='div2'><a href='http://www."+subdomain+".shoppinonline.com'>"+Name+"</a></div><div class='div3'>Special Offer<br class='br_special'>"+offer+"</div></div>");
                }
            } 
        });
    }
});

Answer 1

First, enclose your existing code(loop and the ajax call) in a function. You can then create a setTimeOut loop using recursion and get your function called every 10 seconds .

$(document).ready(function(){

  timeout();
  function timeout() {
     setTimeout(function () {
        //Call the function that makes the ajax request
        //This code will re-execute after every 10 seconds
         timeout();
     }, 10000);
} 
});

Also, doing async: false , you are actually abusing the very nature of ajax calls. It will block your script until the request has been fulfilled.

Cheers!

Answer 2

设置一个十秒计时器并在其中调用Ajax方法，我认为这将解决您的问题