Refresh Javascript RSS Feed without flickering

Question

KamiNuvini 0 Newbie Poster

11 Years Ago

Hello,

I have the following RSS feed: RSS Feed
I load this feed like this:
file: rss2.php

<head>
<link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
</head>
<body style="margin: 0px;">

<div id="RSS_Feed">
<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>
</div>
</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:

<head>
<link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
<script language="javascript">
function loadPageContents() {
  var AJAX = XMLHTTPRequest();
  AJAX.open('GET','rss2.php',true);
  AJAX.onreadystatechange = function() {
    if(this.readyState==4 && this.responseText) {
      document.getElementById('RSS_Feed').innerHTML = this.responseText;
      loadingPage = setTimeout('loadPageContents()',5000);
    }
  }
  AJAX.send(null);
}
</script>
</head>

<body style="margin: 0px;">
<script language="JavaScript">
window.onload = function () {
        var loadingPage = setTimeout('loadPageContents()',5000);
}

<div id="RSS_Feed">
</div>




</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.

<head>
<link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
<script language="javascript" src="js/jquery-2.0.1.min.js"></script>
</head>

<body style="margin: 0px;">

<script language="javascript">
$(function() {
    startRefresh();
});

function startRefresh() {
    setTimeout(startRefresh,5000);
    $.get('rss2.php', function(data) {
    $('#RSS_Feed').html(data);
    });
}
</script>
<div id="RSS_Feed">
</div>




</body>

Thanks!

javascript

2 Contributors
7 Replies
2K Views
23 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by ryantroop

ryantroop 177 Practically a Master Poster

11 Years Ago

XMLHttpRequest is case sensitive.

line 6 should be:

var AJAX = new XMLHttpRequest();

also, relooking through your code,

you never close your script tag in the body... try this instead:

<head>
<link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
<script language="javascript" src="js/jquery-2.0.1.min.js"></script>
<script language="javascript">
function loadPageContents() {
  var AJAX = new XMLHttpRequest();
  AJAX.open('GET','rss2.php',true);
  AJAX.onreadystatechange = function() {
    if(this.readyState==4 && this.responseText) {
      document.getElementById('RSS_Feed').innerHTML = this.responseText;
      setTimeout(loadPageContents, 5000);
    }
  }
  AJAX.send(null);
}

function body_load()
{
  setTimeout(loadPageContents, 5000);
}

}

</script>
</head>
<body style="margin: 0px;" onload="body_load();">
<div id="RSS_Feed">
</div>
</body>

Edited 11 Years Ago by ryantroop because: caught script tag error, changed XMLHttpRequest() format

ryantroop 177 Practically a Master Poster

11 Years Ago

Great! Mark it solved and happy coding :)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ryantroop 177 Practically a Master Poster · Answer 1 · 2013-06-09T00:23:33+00:00

may just be a stylistic thing... but Im not sure why you do

loadingPage = setTimeout(....);

I do not believe setTimeout returns anything... however, that's also not your problem.

While doing a setTimeout('string', number) will essentially do an implicit eval on the string, it's "bad mojo" and may be the source of your problem.

Try instead to replace that line with:

setTimeout(loadPageContents, 5000);

You don't need the () as it is implied in the setTimout() that the function is being called.

I think that should fix your problem... but shrug I have been wrong in the past ;)

KamiNuvini 0 Newbie Poster · Answer 2 · 2013-06-09T12:10:56+00:00

Hi Ryan,

Thanks for your response. I think I did as you suggested - but it did not seem to work. I don't get any errors but it's not displaying any content either.

Here's the code as I'm trying it now:

<head>
<link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
<script language="javascript" src="js/jquery-2.0.1.min.js"></script>
<script language="javascript">
function loadPageContents() {
  var AJAX = new XMLHTTPRequest();
  AJAX.open('GET','rss2.php',true);
  AJAX.onreadystatechange = function() {
    if(this.readyState==4 && this.responseText) {
      document.getElementById('RSS_Feed').innerHTML = this.responseText;
      setTimeout(loadPageContents, 5000);
    }
  }
  AJAX.send(null);
}
</script>
</head>
<body style="margin: 0px;">
<script language="JavaScript">
window.onload = function () {
    setTimeout(loadPageContents, 5000);
}
<div id="RSS_Feed">
</div>
</body>

You can see the page here: http://rss.nuvini.com/list/dev/rss-testing.php

Thanks

KamiNuvini 0 Newbie Poster · Answer 3 · 2013-06-09T16:49:42+00:00

Hi Ryan,

Thanks for your response. There seems to be some progress. I was getting some errors with the code initially - but that was something minor: I only had to remove the } on line 22.

Inspecting the page now, it seems that it is adding the javascript & refreshing this as well - however the page itself remains blank/white. I can see it with Chrome's "Inspect Element" thing in the div - but the page itself doesn't seem to load/do anything with this javascript.

Does something else have to be added? The URL is here and it is adding/refreshing this in the div from rss2.php:

<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&amp;num=15&amp;tz=+2&amp;targ=y&amp;utf=y" charset="UTF-8" type="text/javascript"></script>

Loading rss2.php manually does seem work.

Thanks again,
Niels

ryantroop 177 Practically a Master Poster · Answer 4 · 2013-06-09T17:42:00+00:00

it looks like youre returning a script tag from the AJAX call. That's fine, if the script tag does something.. in this case, when URL encoded, it seems to do a lot of document.writes with data... Something Im sure you can do far more cleanly with some work, but that's another issue.

Since youre using innerHTML, the script tag is going to be ignored (if I recall correctly). I believe that you will have to actually create a script element on the page, give it a source, then append it to the document item you want it to be part of. I am fairly certain that you will not want the http:// as part of the source, as that will probably raise cross site scripting errors.

Your php script should simply return the src of the js file you want to insert.

Your code would look something like...

function loadPageContents() {
  var AJAX = new XMLHttpRequest();
  AJAX.open('GET','rss2.php',true);
  AJAX.onreadystatechange = function() {
    if(this.readyState==4 && this.responseText) {
      var Script = document.createElement("SCRIPT");
      Script.src = this.responseText; //this should be a relative path...

      var Container = document.getElementById('RSS_Feed');
      Container.appendChild(Script);

      setTimeout(loadPageContents, 5000);
    }
  }
  AJAX.send(null);
}

However, this would probably end up making a TON of code spattering all over your page...

Also, your return is sending back a <head> node, a <link> a <div> and then finally the script tag.

You're making bad markup that way...

I think you need to reconsider how you are pushing data to your page.. the PHP should be parsing/pushing the data. Javascript should be taking the format and pushing it to the page as you would like it structured. PHP, at the moment, is going to be faster and parsing out all that data, and the JS client side will not need to take up so much of the responsibility (your user may still be using a windows XP machine or slower, right?).

Lastly, innerHTML blows away all content within the element. You will never be able to "aggregate" that way without having to re-render each pass. If you have to re-render, say, 30 items.. this wont be so bad.. but what happens when you hit 100? 500? That's a lot of work for an end users machine, leading to slow loading times, and ultimately giving up and going to another site.

You are free to ignore me... but I encourage you to refactor/rethink your plan of attack here...

KamiNuvini 0 Newbie Poster · Answer 5 · 2013-06-09T18:18:05+00:00

Hi Ryan,

I appreciate the concern for efficiency. The thing is - the RSS feed comes in as this format. Nothing I can change about that. My endgoal is to simply read out that feed with the CSS applied over it and automatically refresh this feed without flickering.

Efficiency wise - I appreciate the concerns, however this will only be used to display about ~20 entries at most. It will only be accessed by one computer and displayed on a screen. It is not intended for public use and once everything is working it will be set up on a different environment that won't even be accessible for the internet.

I have now done the following to display rss2.php:

<?php
$RSSFeed = file_get_contents('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');
echo $RSSFeed;
?>

The page works... somewhat - after 5 seconds. See here. And it doesn't flicker. It does show some things I don't want there though, so I'll have to look for a way to filter that out when echo'ing $RSSFeed.

Niels

EDIT: Got it! Changed the RSS2.php code:

<?php
$RSSFeed = file_get_contents('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');
$value = trim( str_replace( array( "document.write('", "');"), '', $RSSFeed));
echo preg_replace('/^.+\n/', '', $value);
//echo $value;
?>

rss-testing.php now looks like this, for reference:

<head>
<link rel="stylesheet" type="text/css" href="rss.css" media="screen" />
<script language="javascript" src="js/jquery-2.0.1.min.js"></script>
<script language="javascript">
function loadPageContents() {
  var AJAX = new XMLHttpRequest();
  AJAX.open('GET','rss2.php',true);
  AJAX.onreadystatechange = function() {
    if(this.readyState==4 && this.responseText) {
      document.getElementById('RSS_Feed').innerHTML = this.responseText;
      setTimeout(loadPageContents, 5000);
    }
  }
  AJAX.send(null);
}
function body_load()
{
  setTimeout(loadPageContents, 5000);
}

</script>
</head>
<body style="margin: 0px;" onload="body_load();">
<div id="RSS_Feed">
</div>
</body>

It may not be the best way to do things - but for my purposes it's good enough by the looks of it.

Thanks for the help!