Hello,
I was wondering if you can extract an item from a rss file and display it in a div.
like extract the title and put it in an h3 tag, extract the description and put it in a paragraph, and have the link below, and all automatic, so you just insert the code and it displays the first 10 items or so?
sorry its so specific and kind of complicated, but thanks for all help.
billy
You can do this with AJAX. Do you need some demos?
some demos would be very helpful.
sorry if i dont understand at first, as i have very little experience with javascript and absolutely none with AJAX.
Hi billy,
Someone might post before me.
But i will try my best to provide you the simplest code for AJAX.
It will take me half an hour or less before i can post back. So check back regularly.
essential
ok. ill be on for another 45 min or so.
Sorry to keep you waiting. Now here's what we've got-->
The feeds.rss
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
<title>Using AJAX to Grab RSS Feeds</title>
<link>http://www.somelinks.com</link>
<description>Some decription for the feed's</description>
<item>
<title>DANIWEB: Javascript / DHTML / AJAX Forum</title>
<link>http://www.daniweb.com</link>
<description>The largest IT community in the NET.</description>
</item>
</channel>
</rss>Save this in the same directory along with the (x)HTML document.
(x)HTML doc:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test Page</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
background-color : #f0f0f0;
border : none;
color : #696969;
font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
height : auto;
min-height : 600px;
min-width : 800px;
text-align : center;
vertical-align : baseline;
width : auto; }
input label { display : block; }
input { margin-top : .200em; }
h2 {
background-color : #ccc;
border-bottom : 1px solid #708090;
border-top : 1px solid #708090;
font : 700 160% "Bernard MT Condensed";
line-height : 2ex;
margin-top : 1em;
min-height : 2ex;
padding : .100em 0em .100em 1em;
white-space : nowrap; }
div {
border : none;
margin : 0%;
padding : 0%; }
div#main {
margin : 0% auto;
text-align : left;
height : 100%;
overflow : hidden;
width : 98%; }
div.tube {
border : 1px solid #ccc;
height : 600px;
margin : 1% auto 1% auto;
padding : 1.200em; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var loadRSSFeeds, getRSSFeeds;
var rssData;
getRSSFeeds = function() {
if (( rssData.readyState === 4 ) || ( rssData.readyState === "complete" )) {
div = (( document.getElementById ) ? document.getElementById("content") : document.all.content );
feeds = rssData.responseXML.getElementsByTagName("rss")[0]; // Specifying the root element
tnodes = ""; // Will be used to display our feeds
for ( var x = 0; x < 2; x++ ) { // incrementing variable x by two, were "two" is the number <title> element's inside the feeds.
tnodes += "<h2>" + feeds.getElementsByTagName("title")[x].childNodes[0].nodeValue + "</h2>\n"; // Getting all the titles in the feeds, using the getElementsByTagName method.
tnodes += "<div>" + feeds.getElementsByTagName("description")[x].childNodes[0].nodeValue + "<br />\n"; // Now grabs the content for each title's
tnodes += String( "Visit the link for title" + ( x + 1 )).link( feeds.getElementsByTagName("link")[x].childNodes[0].nodeValue ); // Sends out the links available on this feeds.
tnodes += "</div>\n";
} div.innerHTML = tnodes;
// displays everything from the feeds
}
};
loadRSSFeeds = function( url ) {
rssData = null;
if ( window.XMLHttpRequest ) { // Creates XMLHttpRequest object for IE7+, OP, ff etc.
rssData = new XMLHttpRequest();
} else if ( window.ActiveXObject ) {
try { // Works well in IE Browser's
rssData = new ActiveXObject("Microsoft.XMLHTTP");
} catch( e ) {
rssData = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if ( rssData !== null ) { // Initiating function reference ( getRSSFeeds )
rssData.onreadystatechange = getRSSFeeds;
rssData.open("GET", url, true);
// sending out request
rssData.send( null );
} else {
alert("\nYour browser does not support AJAX Request!");
}
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<div id="content"><a href="javascript:void(0);" onclick="loadRSSFeeds('feeds.rss');">Grab the RSS Feeds!</a></div>
</div>
</div>
</body>
</html>don't get intimidated by the lines in this code, most of it are just plain html tags. Hope it get's what you need really need, billy and good day to you...
a couple questions (and theres probably more later):
do i have to include the meta tags?
does the script have to be internal?
Here are the following lists of optional <meta../> tag's in my stated document.
OPTIONAL:
<!--01-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- Affects the behavior of IE browser's, in Quirks mode or in Standard mode. If you need brief information about this tag, visit: THIS LINK -->
<!--02-->
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <!-- Specifies the default scripting language in a document -->
<!--03-->
<meta http-equiv="Content-Style-Type" content="text/css" /> <!-- Specifies the default style sheet language in a document -->
<!-- you can exclude or include all this meta data in your (x)HTML document's -->REQUIRED:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Recommended to always use this tag-- specifies the default charset in a document. -->But if you hate standards, then you can just apply the whole thing like this:
<html>
<head>
<script><!-- ... --></script>
<title>Non-Standard Document</title>
</head>
<body>
<!-- ... -->
</body>
</html>and that goes for the first question...
— Regarding about your question-- if you can use the script as external file.
Yes, it can be done by seperating the whole content of the <script type="text/javascript" src="./rssReader.js"><!-- /* YOU MUST COPY THE WHOLE CONTENT TO rssReader.js */ //--></script></head>... block and saving with .js extension...
thanks. there is one thing, though. is there a way to exclude the first, title, description and link tags or the xml document (the channel title, desc, and link)? they are already featured elsewhere on my page and i dont need them again.
it works wonderfully, btw.
Simply assign 1 to variable x: for ( var x = 1; x < 2; x++ ) { // The rest of the code continue...
oh. thats easy. thanks. i think this is solved now...
You're always welcome...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.