Is there a way to store that "read" state for the feed items. I want to give feedback to the user about new items in the feed. It will be great if we could notify the user when there are new items in the feed.

Certainly. All RSS items have a GUID (unique id). You could store those in WebSQL or LocalStorage and then just check. My gut says WebSQL would be a bit better for this - but LocalStorage would be easier.

I got issues with Child Browser at the moment with an rss app I'm working on. If the app is in a landscape orientation and upon closing the child browser the parent page (app), is set to portrait mode and loses some height, so can't navigate out.. I can hook into the close of event of the child browser and I am trying to programmatically set the viewpoint, but not finding any helpful code..

Would you be willing to share your Xcode project version of this?

I didn't use XCode - I used PG Build. You can take my code and add it to an XCode/PG project locally though.

I guess a follow up question would be have you used PhoneGap Build or otherwise to successfully deploy an app to iTunes? This RSS reader or even another one. I have had numerous 10.6 rejections and it is starting to seem like Apple is clamping down on HTML 5 non-native apps. Just curious about other developer experiences.

I've not yet pushed to the Apple store, but I'd strongly urge you to check out this article by my coworker Andy:

http://www.tricedesigns.com...

I got a question for you on the Childbrowser that maybe you will know. This doesn't have anything to do with the rss reader, but I am making two apps right now. The childbrowser in one app works fine. I just started another app using the same childbrowser code. In this app, for some reason the Toolbar showing the back, forward, and exit does not pop up. Any idea why this is? I used your code here $(window).on("touchstart", ".fullLink", function(e) {
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});
and assigned a class of fullLink to the link.

Sorry, I don't know. Maybe try the Google Group? (And ping back if you figure it out please.)

How can i get contents of <description> tag.

actual I made some changes with javascript

I am able to get data from <title> <author> <link> tags and put it into SQLlite database.

but unable to get data from <description>. It gives me undefined.

thanks in advance.....

Please share the RSS URL you are using.

http://feedproxy.google.com...

From what I see in the Google Feed API, the description field is parsed into the content field in the entry object. Please see the Google Feed API docs for details.

Should we use same script for my rss feed...?
can we avoid use of feed burner...?
because the data I have to parse is to confidential.

Please see my earlier posts where I parsed the feed manually.

Switched to this version of your reader... but how about to get the enclosure tags for the images (url) and what to do if there isn't an image in every entry... Thanks

Two things:

1) Note that the latest version of PhoneGap supports ChildBrowser w/o using a plugin. Check the InAppBrowser spec.

2) Pascal, if Google's Feed parser doesn't return it, then you need to switch back to parsing the XML yourself, as I did in earlier entries. To see if Google returned it, simply use the console.dir() command on the results to look at it.

I change the rss link into :
//RSS url
var RSS = "http://serambi.blankonlinux...";

But It's doesnt work.

What I must to do?

You must tell me _how_ it isn't working. Use Chrome Dev Tools and spend some time diagnosing where it falls down.

Ah.. now it's working, I dunno why. :)
Anyway, can I modified this and put it on my github?

I posted the code to share, so yes, you can use. If it helps your business, consider visiting my wishlist. ;)

I am thankful for these blog posts. I have a question. Would there be a way to enable childbrowser to open links within the rss post itself on the app?

Absolutely. jQuery lets you listen for events - so you could listen for all clicks within the 'post display' region. Then open them with InAppBrowser.

Oh btw - don't forget PhoneGap now supports ChildBrowser natively, w/o a plugin. It is called InAppBrowser.

I still do not understand Inappbrowser am familiar with childbrowser and am not familiar of where the post display region is located and how to listen for events with jquery.

Well, you have a few things here you are asking about.

InAppBrowser: Not familiar with it? Check the docs. It should clear it up.

Post Display Region: Please read this tutorial closely, and the earlier parts, and you can see where an individual entry is displayed to the user.

jQuery Events: Then I'd recommend learning jQuery. :) Yes I can write this for you pretty quickly, but honestly, you should be able to get up to speed on jQuery in an hour or so, and it would be well worth your time to take a look at it.

Thank you Raymond! I'm gonna look into it I'm self taught on everything but have to piece together codes to get them to work. I attempted to add the touch handler to the page display and could not get any results to work. I'm still learning in app browser and the api. I'll look into it further today. I'll post any codes if that helps, just need to attempt to get the browser to work with individual links in the rss feed posts.

I haven't tested this, but I believe this is what would work. So this code handles recognizing clicks on items that have the fullLink class.

$(window).on("touchstart", ".fullLink", function(e) {
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});

You want the exact same code, but links within where the entry text is text. Entry text is stored in a div with the ID entryText. I think, stress think, this will do:

$(window).on("touchstart", "div#contentPage a", function(e) {
// the rest is the same

I looked at it and followed as stated above and was unable to get anything to work.

What exactly failed though? What do you see and in what environment?

I have the feed working perfectly. I just am struggling with the individual feed links using the in app browser. I am very novice to everything I can provide an example via paste bin and show you what I am doing and where I am inserting everything if that works. I also read a few pages back about description and images but am still learning that as well. Thank you for the quick response.

I'm using rsspect.com to host my feed content so I'm not sure if I need to go there and add a div class to each link on there its in html.

So when you say you are struggling, can you describe more what your issue is? I assume you get the list of entries. I assume you click to view. I assume when you click to view the full entry it is failing to use the child browser? If so, does it load in the app instead?

I have everything working, just cannot get childbrowser to open up any links within the entries. Here is my code: http://pastebin.com/awjz5D7n

I don't see where you tried what I suggested:

$(window).on("touchstart", "div#contentPage a", function(e) {

I am not sure where to insert that at, could use some help there, everything else is working great.

It is just more JavaScript code. You would put it with the rest.

Good tutorial Raymond but I have a problem.
I try to show the pubDate inside each post with
$('#postdate' + i).text(entry.pubDate);
but it doesn't pick the date from the feed

any ideas ?

If you console.dir(entry), do you see it?

I figure out that your tutorial can build successfully on build.phonegap.com, but, I can't handle it when build on local. Any clue?

Nope. I'd need to know what goes wrong when you build locally.

childbrowser not working, my be something wrong on my build.xml (on local). Can I use your config.xml as build.xml ?

You should use InAppBrowser instead. It is the same thing (pretty much) but built *into* PhoneGap now.

Finnaly, I'm using InAppBrowser and succesed. Thanks.

:)

Hi, great tutorials and source file, please help me on how to add date to each entry

and why it is not loading when the rss reader is opened through a main menu button. it only loads when i am refreshing the page.

In part 3 (http://www.raymondcamden.co..., look at the code that creates the "entry" data block and simply add the published date to it. I do not remember the exact property name, but if you console.dir the v object you should see it.

As to your second question, I am not sure. Can you create an APK via PhoneGap Build and share it with me?

Hi Raymond, I send you an email

I am really new to jquery and phonegap. I am trying to show several listviews in a single page app. If you could share how I might be able to display different rss feeds for the different items in a list I would appreciate your help.

I have a page that has buttons that would call different rss feeds that would return a list on a different page. Just what its doing now but allowing for for several feeds to be used by different buttons. Thanks again..

Bill, I hate to sound like a commercial, but if you buy my jQuery Mobile book, I've got an example of a RSS Reader app that lets you input RSS URLs and view them one by one.

Hi Raymond,

Thanks for the great tutorial. I just upgraded to JQuery 2.0.3 and to Phonegap 2.9.0. I then change all .live to .on in the RSS script but not I am getting the following errors:
Firefox - TypeError: entries[selectedEntry] is undefined
Chrome - Uncaught TypeError: Cannot read property 'title' of undefined

on line 68 - $("h1", this).text(entries[selectedEntry].title);

Do you have an idea how to resolve this issue or point me in the right direction? Any help is greatly appreciated.

Can you console.log selectedEntry to ensure it was set to a value?

Hi Raymond,
I am trying to load your code as a separate page but I can't get it to refresh. Not sure where or how to make the call to force the page to load. I changed pageinit to showpage but no joy, any ideas? Thanks.

Well it should be pageshow, not showpage. Did you use that?

I am using your base code for a gallery works awesome. I have a problem that I am trying to solve. I am trying to add the ability to swipe left or swipe right to the next image once I am in the content page. I just don't get how to call back to the listview and track where I am. I have had limited success and was hoping you might point out how to do it. I know it has to center around the entryid and the selectedEntry var. Thanks for any pointers you might be able to share.

The selectedEntry variable (if I remember right, this post is almost a year old now ;) is just the index in the list. If you listen for swipe events, you should be able to say:

on swipe left:
selectedIndex = selectedIndex -1

Then update the data for the page.

Hi Raymond, I tried to compile this code yours and I got error:

plugin unsupported: childbrowser

You need update your code with the new Phonegap plugin, InAppBrowser. Thanks for everything, your posts save me always.

Roel, I've got a huge amount of posts here - it would be a full time job if I had to come back and update everyone that didn't work because of updates. ;) I actually do mention it up in the comments above.

Hi, great work on the app, but there is one problem. If i open the index.html in my computer browser it works like a charm, but built as a PhoneGap app, it fails to work. After some debugging i realized that it doesn't enter the "initialize" function at google.load . Have you encountered this problem? I also mention that it was tested only in Android, and the apk you provided worked.

It could be a whitelist issue. You can either add *, or the google.com.

Hello!

Great Work! I tried to make a rss reader just like that but for multiple feeds. My idea was to create a simple first page with a list of the categories. When you click on each one of them it directs you to an external page (e.g music.html) where you could see each feed. The problem is that even if had create a js file for each category it displays only the feed from the first page's js and if I remove it it doesn't show a thing. Do you have any idea how to make my app with multiple feeds?

Well, I'd not create a JS file for each category. Rather, my JS file would associate an rss feed with each category.

Could someone tell me on how to get the rss reader to update automatically, let us say, when I publish new post to the website where the rss it should automatically update also on the app.

What i have right is that, when I open the rss page the content doesn't update immediately, I have to leave that page open and refresh to get the new content

You could use Push, but to be honest, that seems like overkill. I blog a lot, and I average about 1 post per day. I can't see setting up Push just for that. But if you really want it - that's what you could use. I'd probably do something simpler - in the app, use a setTImeout with a long interval, like an hour, and check then.

Hi used your system,

I have install JSON API into my wordpress site to pull rss data can i call json url to your Javascript code?

like this
//RSS url
var RSS = "http://platform.lk/blog/?js...";

I'm not sure I understand your question. My code uses a Google library to translate RSS into simple JS objects. Could you use your JSON instead? Yes - but you would need to modify my code.

Hello, thanks for this amazing tutorial, but I have a problem, it all worked fine in Part 2, but I'm interested with having an offline view of my feeds, so I tried the sample 4, it didn't work, I read the comments and updated the main.js, it worked well, but when I put my rss link instead of yours, it doesn't work! The app says "Sorry, we are unable to get the RSS and there is no cache. P.S: My rss feeds link is working and I have a sample with the app version "Part 2" using my link and it's working, and I'm testing the app on my android device, Thanks in advance man you're Great!

Have you tried debugging? Please connect Safari or Chrome (depending on your platform) and debug the network call to see what is happening behind the scenes.

Ray do you know if this still works in a Cordova app? It seems pretty old and referencing CB. I have a simple RSS feed display in my app currently. The problem is I need certain RSS items to open in Safari and some to open in InApp Browser. I don't really have control of the different links to add like window.open and _system. Would I be able to use your plugin and have some control of the links?

Thanks

Not quite sure what you are asking specifically as you kinda jump around a bit. Honestly it sounds like if you are asking if the InAppBrowser will work now as opposed to the old ChildBrowser, if so, yeah, it works. You would change my code that uses the old plugin to just use the new way of doing the IAB.

Any Ideas about Phone Gap RSS Caching. and reading app on offline mode

Yes. You have multiple options to store data (file system, localstorage, websql).

The source code link is broken. Will you repost it?

Fixed.

Thank you sir! It looks like the other parts are also broken. Do you have a Github for this whole project? I just followed your page and am impressed by your projects, but I didn't see the rss on Git?

I started using one GitHub repo for my Cordova demos about half a year ago, but it was after this post was made. You can see it here: https://github.com/cfjedima.... There is a RSS demo, but it uses Ionic, so it is pretty different. You said, "the other parts are broken" - what do you mean?

Sorry for the confusion. The other source code chunks on the other parts of the RSS Feeder Tutorial are also dead links.

Oops. So - when I migrated my blog, I messed up the part that handles attachments. I'll fix these though.

Thanks! I teach at Vocational Center, and I going to use this tutorial as a base to introduce the capabilities of PhoneGap.

Ok, all updated. Keep in mind this "series" is almost 3 years old so.... just remember it. :)