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>");
                }
            } 
        });
    }
});

I think you need to wrap the entire function and give it a name, then you can pass it to the setInterval function. Something like setInterval(myFunction, 10000); — lharby, Feb 06 '15 at 11:21
okay,i got the idea,what you are saying is that i have to wrap the whole content from var n=9; till end into one function and then pass this function to setInterval(),right? — Dinesh Kumar, Feb 06 '15 at 11:25
Or it seems you can pass the function into the ajax success call. http://stackoverflow.com/a/5687625/1238244 — lharby, Feb 06 '15 at 11:26

score 4 · Answer 1 · answered Feb 06 '15 at 11:26

4

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!

answered Feb 06 '15 at 11:26

nalinc

7,375
24
33

I used your idea,but more than 9 divs are getting generated :D after 10 secs – Dinesh Kumar Feb 06 '15 at 11:33
I thought thats required, why were you using the for loop then ? – nalinc Feb 06 '15 at 11:34
i am using for loop for generating 9 divs dynamically. – Dinesh Kumar Feb 06 '15 at 11:36
Ah gotcha , just create all the
's *outside* the recursive code. Keep the current for loop to change id's of those
's. Hope its clear :)
– nalinc Feb 06 '15 at 11:38

score 0 · Answer 2 · answered Feb 06 '15 at 11:18

0

Set A timer Of Ten Second And Call Ajax Method Inside That I think This Will Solve Your Problem

answered Feb 06 '15 at 11:18

Coder

240
2
4
20

how to refresh dynamically generated divs using ajax?

2 Answers2