Reloading div content, after its innerHTML changes

[Izzet Pembeci]

I am trying to display some rss feeds in my homepage. To do that I am
using an external script which returns smth like:
document.writeln("<div ...>")
document.writeln("Title of News 1") !! read from the feed
.....
document.writeln("</div>")

So displaying just one feed is a matter of adding the line:
<script language=Javascript src="http....?rssfeed=somefeed.xml">
</script>

But I want to display more than one rss feed. I envision a design
where I have a form/select referring to different rss feeds. When the
reader selects a specific rss feed, a certain div's innerHTML changes
to the script I mentioned above where somefeed.xml is the appropriate
feed.

The problem is when innerHTML changes, the external script is not
called again.
Is there a way to this? May be by adding an event listener? I thought
things like using setInterval, getting the div as a node duplicating
it, modifying it and then replacing it but didn't try them since I
believe same problem will persist.

The overall thing seems something like this:

<SELECT onChange="changeFeed(this.value)>
....
<div id=rssFeed>
....
</div>

<javascript>
function changeFeed(feedID) {
.....
var str = "<script language=Javascript ";
str += "src=http://...rsstohtml.php?rssfeed=somefeed.xml></script>"
!! where somefeed.xml is generated based on feedID and in fact a full
URL
elem = document.getElementById('rssFeed');
elem.innerHTL = str;
....
}
</javascript>

I just wrote these over the top of my head to paint a picture, so
ignore typos, syntax errors etc.

I'd appreciate if you can suggest some way to overcome this.

I have a workaround like having div's for each feed, loading their
content initially but not displaying them (CSS, style.display=none)
and only display when user selects them. But I don't like it and if I
wanted to enable choosing among many feeds it becomes costly (both for
the initial loading, call the external script N times and the writing
the HTML, very crowded).

Another solution may be updating a cookie with the selected feedID,
reloading the page, while loading the page checking the cookie to
display the selected feed but I don't like the "reload page" part.

I should also mention that I can only run client side javascript on
this page, no CGI, PHP etc.

Thanks.

iZzeT

 

[Martin Honnen]

I am trying to display some rss feeds in my homepage. To do that I am
using an external script which returns smth like:
document.writeln("<div ...>")
document.writeln("Title of News 1") !! read from the feed
....
document.writeln("</div>")

So displaying just one feed is a matter of adding the line:
<script language=Javascript src="http....?rssfeed=somefeed.xml">
</script>

But I want to display more than one rss feed. I envision a design
where I have a form/select referring to different rss feeds. When the
reader selects a specific rss feed, a certain div's innerHTML changes
to the script I mentioned above where somefeed.xml is the appropriate
feed.

The problem is when innerHTML changes, the external script is not
called again.

Use an iframe, there you can change the location as needed e.g.
<iframe name="theFeed" src="showFeed?rssfeed=somefeed.xml">
<a href="showFeed?rssfeed=somefeed.xml">some feed</a>
</iframe>
You would need to change the result of showFeed to return HTML directly
and not script that document.writes HTML.
Then to change the displayed feed you use
<select name="feedSelect"
onchange="if (window.frames.theFeed) {
window.frames.theFeed.location.href =
'showFeed?rssFeed=' + escape(this.options[this.selectedIndex].value);
}">
<option value="somefeed.xml">some feed</option>
<option value="feed1.xml">feed 1</option>
...
</select>

If you really need to have that showFeed CGI return JavaScript then you
can document.write to the iframe e.g.
var iframeDoc = window.frames.theFeed.document;
iframeDoc.open();
iframeDoc.write('<script type="text/javascript"
src="showFeed?rssfeed=' + escape('somefeed.xml') + '"><\/script>');
iframeDoc.close();