Reloading div content, after its innerHTML changes

Discussion in 'Javascript' started by Izzet Pembeci, Nov 13, 2004.

  1. 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
     
    Izzet Pembeci, Nov 13, 2004
    #1
    1. Advertising

  2. Izzet Pembeci wrote:

    > 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();

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 13, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. thunk
    Replies:
    1
    Views:
    347
    thunk
    Mar 30, 2010
  2. thunk
    Replies:
    0
    Views:
    522
    thunk
    Apr 1, 2010
  3. thunk
    Replies:
    14
    Views:
    655
    thunk
    Apr 3, 2010
  4. mscir
    Replies:
    3
    Views:
    343
    Martin Honnen
    Jun 26, 2005
  5. Mad Scientist Jr

    setting innerHtml of div tag, changes aren't sticking

    Mad Scientist Jr, Mar 8, 2006, in forum: Javascript
    Replies:
    3
    Views:
    134
    Mad Scientist Jr
    Mar 10, 2006
Loading...

Share This Page