By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 1,395 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,952 IT Pros & Developers. It's quick & easy.

Refresh Javascript RSS Feed without flickering

P: 1
Hello,

I have the following RSS feed: RSS Feed
I load this feed like this:
file: rss2.php
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
  3. </head>
  4. <body style="margin: 0px;">
  5.  
  6. <div id="RSS_Feed">
  7. <script language="JavaScript" src="http://rss.nuvini.com/list/feed2js/feed2js.php?src=http%3A%2F%2Frss.nuvini.com%2Fpublic.php%3Fop%3Drss%26id%3D-1027%26key%3D19a8dbb063bf0c30d5e74c5fb619f33255a027db&num=15&tz=+2&targ=y&utf=y"  charset="UTF-8" type="text/javascript"></script>
  8. </div>
  9. </body>
Now what I want to do, is automatically refresh this page. I tried to do this with a meta tag, but this gives flickering when it refreshes.

Now what I want to do, is check for updates in the RSS feed, say, every 1 minute. If there are updates, I want it to display the latest feed, but I don't want it to flicker.
I understood that the way to do this is through javascript/jquery/AJAX. My knowledge of those is pretty much nonexistant, so I googled quite a bit and found some tutorials and such, but nothing seems to work the way I want for me. In the end I think at some point I had something that did refresh fine but it didn't load the CSS so I was missing the layout.

Besides the rss2 file I also have rss-testing.php, this is what I have right now whilst trying, but it's not working at all for me:
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
  3. <script language="javascript">
  4. function loadPageContents() {
  5.   var AJAX = XMLHTTPRequest();
  6.   AJAX.open('GET','rss2.php',true);
  7.   AJAX.onreadystatechange = function() {
  8.     if(this.readyState==4 && this.responseText) {
  9.       document.getElementById('RSS_Feed').innerHTML = this.responseText;
  10.       loadingPage = setTimeout('loadPageContents()',5000);
  11.     }
  12.   }
  13.   AJAX.send(null);
  14. }
  15. </script>
  16. </head>
  17.  
  18. <body style="margin: 0px;">
  19. <script language="JavaScript">
  20. window.onload = function () {
  21.         var loadingPage = setTimeout('loadPageContents()',5000);
  22. }
  23.  
  24. <div id="RSS_Feed">
  25. </div>
  26.  
  27.  
  28.  
  29.  
  30. </body>
If anyone knows how to achieve this, that would be awesome.

If it helps, this is the code that did some refreshing without flickering (that I could see) but it missed the CSS.
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
  3. <script language="javascript" src="js/jquery-2.0.1.min.js"></script>
  4. </head>
  5.  
  6. <body style="margin: 0px;">
  7.  
  8. <script language="javascript">
  9. $(function() {
  10.     startRefresh();
  11. });
  12.  
  13. function startRefresh() {
  14.     setTimeout(startRefresh,5000);
  15.     $.get('rss2.php', function(data) {
  16.     $('#RSS_Feed').html(data);
  17.     });
  18. }
  19. </script>
  20. <div id="RSS_Feed">
  21. </div>
  22.  
  23.  
  24.  
  25.  
  26. </body>
  27.  
Thanks!
Jun 7 '13 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,265
in line 5 of your non-working example it has to be:

Expand|Select|Wrap|Line Numbers
  1. var AJAX = new XMLHttpRequest;
at least. if u want to support older IEs then you need to use IE's activeX objects here like: http://en.wikipedia.org/wiki/XMLHttpRequest
Jun 10 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.