Jquery: DIV tag not refreshing in IE/Chrome using Jquery setInterval

Question

Hi Everyone.

I am trying to read blog entries feed by using Google-Ajax-Feed-API and JQuery. I have achieved most of the stuff, but in refreshing the DIV tag after every 10sec, I am having some problem.

The code does not refresh DIV tag in IE or Chrome.(however refreshes well in Mozilla).

Any help? Thanks.

        <script type="text/javascript">
        google.load("feeds", "1");
        google.setOnLoadCallback(initialize);
        $(document).ready(function(){
            setInterval('initialize()',10000)
        }); 
        function initialize() {
            var url = "http://www.digg.com/rss/index.xml" + "?q=" + Math.random();
            var feed = new google.feeds.Feed(url);
            feed.load(function(result) {
                if (!result.error) {
                    var container = document.getElementById("feed");
                    $(container).empty();
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];
                        var div = document.createElement("div");
                        div.appendChild(document.createTextNode(entry.title));
                        container.appendChild(div);
                    }
                }
            });
        }
    </script>

Answer 1

Here's something to try. Instead of this:

google.load("feeds", "1");
google.setOnLoadCallback(initialize);
$(document).ready(function(){
  setInterval('initialize()',10000)
}); 

Try this:

google.load("feeds", "1");
google.setOnLoadCallback( // wait for google
  function(){
    $(document).ready(function(){ // now jquery's doc ready
      initialize(); // since you seem to want to run this immediately once
      setInterval(initialize,10000); // and now every ten seconds
    }); 
  }
);