Question

I have a page showing RSS feeds with the Google API and there is an initialization problem. When the page loads the news items aren’t shown. If I refresh the page, then they are.

I have this in the HTML

<div id="snews" style="position:relative; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;">
    <div id='feed-control'>
       <span style='color:#676767;font-size:11px;margin:10px;padding:4px;'>Loading...</span>
    </div>

        <script type='text/javascript'>
        // Load the feeds API and set the onload callback.
        google.load('feeds', '1');
            load_rss("http://www.catholicnewsagency.com/rss/news.xml");
        google.setOnLoadCallback(load_rss);
    </script>
</div> <!-- End snews -->

The Google API calls to load the news items are in this function.

// Load RSS
function load_rss(url) {
    google.load("feeds", "1");
    var feed = new google.feeds.Feed(url);
    var entry_target = "viewer";
    /*************************************
    Feed Title       feed.title 
    Feed Link        feed.link 
    Feed Description feed.description 
    Feed Author      feed.author 
    Feed Entries     feed.entries[] 
    Entry Title      feed.title 
    Entry Link       feed.link 
    Entry Content    entry.content 
    Content Snippet  entry.contentSnippet 
    Published Date   entry.publishedDate 
    Categories       entry.categories[]
    **************************************/
    feed.setNumEntries(10);
    feed.load(function(result) {
        $('#feed-control').append('<table id="rssentries"></table>');
        if (!result.error) {
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var entrydate = new Date(entry.publishedDate);
            var entry_yr  = entrydate.getFullYear();
            var entry_mon = entrydate.getMonth()+1;
            if (parseInt(entry_mon) < 10 ) { entry_mon = "0"+entry_mon; }
            var entry_day = entrydate.getDate();
            if (parseInt(entry_day) < 10 ) { entry_day = "0"+entry_day; }
            var entry_date= entry_mon + "." + entry_day + ': ';
            $('#rssentries').append('<tr><td>'+entry_date+'<a href="'+entry.link+'" target="'+entry_target+'" onclick="show_title(\''+escape(entry.title)+'\');">'+entry.title+'</a></td></tr>');
          }
        }
    });
}

What should I fix for the news items to show the first time around?

Answer 1

The problem was that the container elements were not loaded yet. I had to put the script in document.ready.