How do I make a dynamically generated script run in a div

Here is the relevent code. I would like to insert the feeds script into the division so I can refresh the division with a button. The innerHTML does put it there, but it will not run the script that way. The document.write shows the news content (script runs), but I can’t figure out how to refresh it. I tried this on a separate html page and inserted into an iframe…that would not work due to security issues.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="floatframe"></div>

<script type="text/javascript">

var feed = "";
var link = "";

function getFeed() {

var feeds = [
'http%3A%2F%2Ffeeds.skynews.com%2Ffeeds%2Frss%2Fus.xml',
'http%3A%2F%2Ffeeds.bbci.co.uk%2Fnews%2Fworld%2Frss.xml',
'https%3A%2F%2Fwww.nytimes.com%2Fsvc%2Fcollections%2Fv1%2Fpublish%2Fhttps%3A%2F%2Fwww.nytimes.com%2Fsection%2Fus%2Frss.xml',
'http%3A%2F%2Frss.slashdot.org%2FSlashdot%2Fslashdot'
];

function randomFeed(feeds) {
   return feeds[Math.floor(Math.random() * feeds.length)];

}

var feed = randomFeed(feeds);

var link = "<script language='JavaScript' src='http://feedroll.com/rssviewer/feed2js.php?src=" + feed + "&chan=title&num=4&desc=1&targ=y&utf=y&html=y' charset='UTF-8' type='text/javascript'><\/script>";

//document.getElementById("floatframe").innerHTML = link;

document.write("<div id='floatframe' name='NewsFrame' style='overflow-y:auto; padding-top:15px; padding-left:5px;'>" + link + "</div>");

}
</script>

<script type="text/javascript">
<!--
function myRefresh(div){
//window.location.reload(false);
$('#floatframe').load(document.URL +  ' #floatframe');
}
// -->
</script>

<noscript>
<script>
document.write("<a href='http://feedroll.com/rssviewer/feed2js.php?src=' + feed + '&chan=title&num=4&desc=1&targ=y&utf=y&html=y'>View RSS feed</a>");
</script>
</noscript>

<script type="text/javascript">
<!--
  getFeed();
// -->
</script>

<br />
<button onclick="javascript:myRefresh(floatframe);">Refresh News</button>

Here’s an example that I think does what you want. One of the issue you’re running in to with using innerHTML is that it will not execute script tags per the HTML5 spec.

That said, here’s how I’d tackle the issue based on your code. There’s probably a better way to do all of this, but I took a quick pass at modifying what you already have in place.

    <script type="text/javascript">
        var feed = "";
        var link = "";
       
        function getFeed() {
            // first, clear all markup
            document.body.innerHTML = ""

            // this is all the same
            var feeds = [
            'http%3A%2F%2Ffeeds.skynews.com%2Ffeeds%2Frss%2Fus.xml',
            'http%3A%2F%2Ffeeds.bbci.co.uk%2Fnews%2Fworld%2Frss.xml',
            'https%3A%2F%2Fwww.nytimes.com%2Fsvc%2Fcollections%2Fv1%2Fpublish%2Fhttps%3A%2F%2Fwww.nytimes.com%2Fsection%2Fus%2Frss.xml',
            'http%3A%2F%2Frss.slashdot.org%2FSlashdot%2Fslashdot'
            ];
        
            function randomFeed(feeds) {
            return feeds[Math.floor(Math.random() * feeds.length)];
            }
        
            var feed = randomFeed(feeds);
            
            var link = "<script language='JavaScript' src='http://feedroll.com/rssviewer/feed2js.php?src=" + feed + "&chan=title&num=4&desc=1&targ=y&utf=y&html=y' charset='UTF-8' type='text/javascript'><\/script>";
            
            // since you can't use innerHTML, move all of the markup to the document.write code
            document.write("<div id='floatframe' name='NewsFrame' style='overflow-y:auto; padding-top:15px; padding-left:5px;'>" 
                + link 
                + "</div>" 
                + "<br /> <button onclick=getFeed();>Refresh News</button>");
        }
    
        // call the function when the page loads
        getFeed();
    
    </script>

Thanks for the help, but I still have the same issue. This div is at the end of the page, which is a custom Outlook Today page. When I try to refresh the news, the document.write function erases everything else except the news. Only way I have found to do it is to refresh the entire page.

The problem is caused by feedroll. They use document.write in their script so you are trapped into catering for that. It might be possible to achieve what you want by using a frame for the feed, so that you can just refresh the frame instead of the whole page.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.