CODEWITHSUNDEEP
javascriptjqueryjquery-mobilemobilerss
user3293964
user3293964

Reputation: 11

How to reed rss feeds with jquery mobile

I tried to read an RSS feed from an external website with the following code:

$.get('http://myrssurl.com',function (XMLmediaArray) {
  $(XMLmediaArray).find('item').each(function() {
    var item = $(this);
    var title = item.find('title').text();
    var description = item.find('description').text();
    var link = item.find('link').text();
    var image = item.find('enclosure[type="image/jpeg"]').attr('url');
  });
});

I got an error message which says: 

XMLHttpRequest cannot load http://myrssurl.com. No '*Access-Control-Allow-Origin*' header is present on the requested resource. Origin 'localhost is therefore not allowed access.

Do you know how to solve this?

Thanks for your help! in the meanwhile I tried to use the GOOGLE RSS FEED service but I also have to deal with a problem by using this:

in the html file I'm using this:

<script type="text/javascript">
new rssdisplayer("msndiv","http://www.myrssfeedurl",6,"date, description");
</script>

and in the Javascript file the follow:

  google.load("feeds", "1"); //Load Google Ajax Feed API (version 1)

function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description"wink
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed, </div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}


rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}


rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}

but when I execute it in the Browser I get this error message: Uncaught ReferenceError: rssdisplayer is not defined (index):127 (anonymous function)

Do you guys know what the issue is?

Upvotes: 1

Views: 375

Answers (2)

user3293964
user3293964

Reputation: 11

I solved it with the Google API RSS Feed Service. The error came because the rssdisplayer.js file was included too late in the html file. Include it directly after the jquery mobile javascript

Upvotes: 0

Emmanuel Bourgerie
Emmanuel Bourgerie

Reputation: 130

This is an AJAX security: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS You are not allowed to query on other websites.

I would recommend to parse the RSS feed on your server and re-format it in JSON for convenience.

Upvotes: 1

Related Questions