Javascript RSS feeder

[danskkr]

I've tried asking this elsewhere but without much success. I'm a html/css developer with little programming skills who has been saddled with making a javascript rss feed script work. I feel that that the solution is probably pretty simple for a javascript guru but it eludes me.

Ok, so I've got an html web page with a list of RSS items which are generated by a seperate javascript file called gfeedfetcher. Gfeedfetcher creates an array with each RSS item's title, date and description and wraps each one in a <li> </li>. All well and good. The problem is I need to move the description to different DIV (div id="itempage"> on the page, outside of the gfeedfetcher <ul>. So when the user clicks on an itemtitle, it takes them to div#itempage, where hopefully, the description for that item has been dynamically added with javascript..

As I see it, I thought I could use the [i] variable generated on each pass through the array as an ID for each item and then match the itemtitle and itemdescriptions with matching IDs somehow. But even just writing this out I'm starting to think I'm going to need some kind of global array or database (its an iphone webapp, so I could make use of html5 client side storage) which can then be called from a jquery click event on the HTML page.

But I'm sure there must be a way without having to resort to databases...

gfeedfetcher.prototype._displayresult=function(feeds){
	var rssoutput=(this.itemcontainer=="<li>")? "<ul class='edgetoedge'>\n" : ""
	gfeedfetcher._sortarray(feeds, this.sortstring)
	for (var i=0; i<feeds.length; i++){
		//var itemtitle="<a rel=\"nofollow\" href=\"" + feeds[i].link + "\" target=\"" + this.linktarget + "\" class=\"titlefield\">" + feeds[i].title + "</a>"
			var itemtitle="<a href=#itempage>" + i + feeds[i].title + "</a>"
			var inputid = i;
			var itemlabel=/label/i.test(this.showoptions)? '<span class="labelfield">'+this.feeds[i].ddlabel+'</span>' : " "
			var itemdate=gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions)
		
	for (var j= 0; j<feeds.length; j++) {		
		if(inputid == j)
		{
		var itemdescription=/description/i.test(this.showoptions)? "<br />"+ j +feeds[i].content : /snippet/i.test(this.showoptions)? "<br />" +feeds[i].contentSnippet  : ""	
		//alert(itemdescription)
		}
	}	
	rssoutput+=this.itemcontainer + itemtitle + " " + itemlabel + " " + itemdate + "\n" + this.itemcontainer.replace("<", "</") + "\n\n"
	}
	rssoutput+=(this.itemcontainer=="<li>")? "</ul>" : ""	
	this.feedcontainer.innerHTML=rssoutput
	document.getElementById(itembox).innerHTML=itemdescription

}

Apologies for the longwinded explanation....!

[rnd me]

i would simply memorize the incoming object to a global, and build a unique ID for each item when it arrives. you can then pass that id to an HTML event handler that paints the description into the "view" div.

without seeing the whole code i can't give you any snips, but it's a simple concept.

it would be easier to build the html using dom methods instead of strings: the advantage being that you don't need globals to code events; you can simply tell it to innerHTML the right variable on-demand, rather than pass a key to a global function...

[danskkr]

Nice one, thanks.

I thought it seems simple but i never seem to get anywhere. I guess part of it is that I was trying to call a click event from a different page and link it to an array on the js file.

I did think there might be a way of building into the function above, if I could somehow incorporate this

document.getElementById(itembox).innerHTML=itemdescription

into this as a click event

var itemtitle="<a href=#itempage>" + i + feeds[i].title + "</a>"

Do you have any nice links you point me to to show me some of these DOM methods?