XML/RSS Parsing with XSL and Javascipt

Discussions pertaining to programming of backend systems and released UNL template code.

XML/RSS Parsing with XSL and Javascipt

Postby beck » Mon Jun 18, 2007 5:13 pm

First - If your not already doing so, I would definitely recommend using the UNL Calendar ([url]events.unl.edu[/url]) for dates, deadlines, etc. - but if your department has some other news, updates, that you want to provide as an RSS feed (as we do with the health center) you may want to think about using the following to parse your feed within your web page allowing you to only make changes to the feed itself to change all instances of its use.

As pointed out, there are some ways to have third party sites parse the xml to html for you - ie google - but here's a way I've found to parse a feed using xsl and javascript.

First off - to give credit where credit is due - this idea was manipulated from the original found at http://www.daymap.net/blog/?p=5

For an example and for all the source files - the testing folder is at:

http://www.unl.edu/health/xml_test/

The files used:

http://www.unl.edu/health/xml_test/news.xml
http://www.unl.edu/health/xml_test/test.xsl
http://www.unl.edu/health/xml_test/test.js

Basically the way it works is that the javascipt calls up the xsl file (xsl is a kind of stylesheet (like css is to html) for xml files - for more info on xsl check out http://www.w3schools.com/xsl/) and the xml into an object within the body of your existing page.

Create a xml file based upon news.xml (this is pretty bare bones - you'll probably want to add more elements - and don't forget to fill in the <guid> element) Tweak the xsl file if you want the feed to show up differently or if you want more/less elements displayed on the page. Finally change the url's in the test.js file to point to your specific xsl and xml files.

Now for the html page - insert the styles for any classes from your xsl file into the <head> of the page - you're going to also need to change the <body> tag to to <body>. Then insert the following into the maincontent area.

Code: Select all
<script></script>
<div></div>


Of course with the source pointing to your local copy of the javascript file. Upload all the files to your server and test it out. It will display all items in your feed so this might not be the most practical option for very long feeds but works splendidly for shorter feeds.

Any questions - or if my instructions have any errors - simply post a reply and I'll try to answer/fix anything that is confusing/wrong.
beck
 
Posts: 41
Joined: Thu Oct 06, 2005 11:02 am
Location: VCSA

Postby beck » Mon Jun 18, 2007 5:17 pm

for some reason the code isn't showing up correctly in the post

it should be


script type="text/javascript" src="test.js" /script
div id="output" /div
beck
 
Posts: 41
Joined: Thu Oct 06, 2005 11:02 am
Location: VCSA

Postby beck » Mon Jun 18, 2007 6:57 pm

and of course it isn't working in Internet Explorer...

Hopefully it will soon though - stay tuned or give any advice if you notice any fix for IE
beck
 
Posts: 41
Joined: Thu Oct 06, 2005 11:02 am
Location: VCSA

Postby acoleman » Wed Sep 24, 2008 2:13 pm

Brian, are you still around?

If so, I wish to purchase a soda (or juice, if you don't like the carbonated beverages).

This code just came in really handy on building a new Scarlet Feed for the UNL Faculty/Staff web page.

http://www.unl.edu/ucomm/facstaff/

You can collect at the next WDN meeting... Just shoot me an email. :D
acoleman
 
Posts: 48
Joined: Tue Sep 20, 2005 2:54 pm
Location: 321 Canfield

Postby beck » Wed Sep 24, 2008 2:34 pm

Glad it could help - although I've noticed that this page details info that I ended up giving up on (and removing all linked pages from our server).

The more finished and relevant code and documentation can be found at:
http://www1.unl.edu/wdn/wiki/RSS_News_Feeds
- Bryan
beck
 
Posts: 41
Joined: Thu Oct 06, 2005 11:02 am
Location: VCSA


Return to Coding

Who is online

Users browsing this forum: No registered users and 1 guest

cron