PhoneGap RSS Reader - Part 3
Welcome to my third entry for my (what was at first) simple PhoneGap RSS reader. If you haven't yet, please be sure to read part 1 and part 2 so you have some context about how this application works. In this part, I'm going to tackle two enhancements suggested to me by my readers:
- First - support rendering the entries if the user is offline.
- Second - clean up the UX a bit so that when a user views an entry, leaves, and then comes back to another entry, they don't see the old text there for a split second.
Let's tackle the offline question first. I spent some time thinking about this and tried a few things that didn't quite work out the way I wanted. The first thing I tried was checking navigator.onLine. (See this Stackoverflow entry for details.) This did not work well for me. When I switched my device to airplane mode it still reported me as online. I then looked into PhoneGap's Connection API. This kinda worked. It didn't seem to grok my Airplane mode at all. It certainly didn't report it as online (it returned a null actually) and I could have handled it, but I then had the issue of how I was going to handle coordinating the deviceready event along with the jQuery Mobile pageinit method.
Then I realized something. I already had an Ajax error handler. And it worked. That's obvious of course, but it occurred to me. Why not use this error handler? It would not only support offline mode, but any error on the remote server as well. At the end of the day, if I can't get the RSS feed, who cares if I'm offline or if the server is down. I could see caring, and if so, you would obviously want to use the PhoneGap Connection value, but I figured, why not go with the simple route.
As for storage - that turned out to be trivial - LocalStorage. Have you guys figured out yet that I really love HTML5 LocalStorage?
So, I decided to get rid of AjaxSetup. I only have one Ajax call in the entire application, so why not tie it to that call. So I switched from a $.get to a $.ajax:
2 url:RSS,
3 success:function(res,code) {
4 entries = [];
5 var xml = $(res);
6 var items = xml.find("item");
7 $.each(items, function(i, v) {
8 entry = {
9 title:$(v).find("title").text(),
10 link:$(v).find("link").text(),
11 description:$.trim($(v).find("description").text())
12 };
13 entries.push(entry);
14 });
15 //store entries
16 localStorage["entries"] = JSON.stringify(entries);
17 renderEntries(entries);
18 },
19 error:function(jqXHR,status,error) {
20 //try to use cache
21 if(localStorage["entries"]) {
22 $("#status").html("Using cached version...");
23 entries = JSON.parse(localStorage["entries"])
24 renderEntries(entries);
25 } else {
26 $("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
27 }
28 }
29})
This is - for the most part, the same code as before, just using the core $.ajax method. You can see where the error function will look into LocalStorage for the cached copy, and where the success function always stores a copy. The renderEntries function is simply an abstracted out version of the display code:
2 var s = '';
3 $.each(entries, function(i, v) {
4 s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
5 });
6 $("#linksList").html(s);
7 $("#linksList").listview("refresh");
8}
Woot. That works. Now for the next request. We want to ensure that users don't see the old content when loading in the RSS entry detail page. This turned out to be a bit weird. jQuery Mobile has logic to say, "Do this when a page is hiding, or before it hides", but for the life of me (and please correct me if I'm wrong) there doesn't seem to be a good way to get the page that is leaving. You get passed the page you are going to, but not the current page. I really feel like I'm missing something here, so please note this may get corrected later. For me though I simply added an event listener to the main page. It now sees if a previous page exists, and if so, clears out the text:
2 if(data.prevPage.length) {
3 $("h1", data.prevPage).text("");
4 $("#entryText", data.prevPage).html("");
5 };
6});
And that's it. I've included the entire JavaScript file below (the HTML hasn't changed from the previous entry) and a zip of the entire project may be downloaded for the low cost of free.
2//Title of the blog
3var TITLE = "ColdFusion Jedi";
4//RSS url
5var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusionBlog";
6//Stores entries
7var entries = [];
8var selectedEntry = "";
9
10//listen for detail links
11$(".contentLink").live("click", function() {
12 selectedEntry = $(this).data("entryid");
13});
14
15function renderEntries(entries) {
16 var s = '';
17 $.each(entries, function(i, v) {
18 s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
19 });
20 $("#linksList").html(s);
21 $("#linksList").listview("refresh");
22}
23
24//Listen for main page
25$("#mainPage").live("pageinit", function() {
26 //Set the title
27 $("h1", this).text(TITLE);
28
29 $.ajax({
30 url:RSS,
31 success:function(res,code) {
32 entries = [];
33 var xml = $(res);
34 var items = xml.find("item");
35 $.each(items, function(i, v) {
36 entry = {
37 title:$(v).find("title").text(),
38 link:$(v).find("link").text(),
39 description:$.trim($(v).find("description").text())
40 };
41 entries.push(entry);
42 });
43 //store entries
44 localStorage["entries"] = JSON.stringify(entries);
45 renderEntries(entries);
46 },
47 error:function(jqXHR,status,error) {
48 //try to use cache
49 if(localStorage["entries"]) {
50 $("#status").html("Using cached version...");
51 entries = JSON.parse(localStorage["entries"])
52 renderEntries(entries);
53 } else {
54 $("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
55 }
56 }
57 });
58
59});
60
61$("#mainPage").live("pagebeforeshow", function(event,data) {
62 if(data.prevPage.length) {
63 $("h1", data.prevPage).text("");
64 $("#entryText", data.prevPage).html("");
65 };
66});
67
68//Listen for the content page to load
69$("#contentPage").live("pageshow", function(prepage) {
70 //Set the title
71 $("h1", this).text(entries[selectedEntry].title);
72 var contentHTML = "";
73 contentHTML += entries[selectedEntry].description;
74 contentHTML += '<p/><a href="'+entries[selectedEntry].link + '">Read Entry on Site</a>';
75 $("#entryText",this).html(contentHTML);
76});
I wanted to ask you, since you tested lot of Adobe mobile technologies, are you satisfied with jQuery Mobile performances.
Some things work better than in AIR but jQuery transitions take time. They are not instant, takes 1 second to load another page, item renderers work nice and some things look much easier to develop than in mobile AIR. Just my 2 cents.
Cheers,
Ivan
http://forta.com/blog/index.cfm/2012/1/5/Preventin...
First af all I'm a newbie so my skills aren't that good at all.
I've dowloaded the attached file from above.
I've tried with several feeds, some works, the most of them doesn't. I'm not sure if the not are supported or not. But one thing make me very uncertain and that is why I got this messege "Sorry, we are unable to get the RSS and there is no cache" when I try with the feed you included in the file. (var RSS = "http://feedproxy.google.com/RaymondCamdensColdfusi...;;)
Do you know why? At this moment I've only tried to run this on my PC /Win 7, browser Chrome) or do I HAVE to run it inside Phonegap?
Best regards Niclas
Thanks a lot. I've got an iPhone and an iPad but no Mac. I really have to get a Mac so I can try Phonegap :)
Do you have any ideas why http://blip.tv/nettuts/rss works? It just a feed I got online, it is not mine or anything.
//N
Love the app so far but only one complaint. When reading an article (at least on android 4.0.3) and you hit the back button it closes the app vs returning to the home page.
http://wiki.phonegap.com/w/page/29494136/Android%2...
It wasn't too difficult to fix but I'm sure others will be looking for this at some point.
Also another thing I ran into was 4.0.3 has issues with phonegap and screen rotation. It pretty much kills the app. Had to modify the AndroidManifest.xml and force portrait to fix this.
<activity
android:label="@string/app_name"
android:name=".AppNameActivity" android:screenOrientation="portrait">
Otherwise its still awesome! v4 to tackle push/pull notifications?
Anyway... sorry to be dense, but what do you mean by push/pull notifications?
and
http://developer.android.com/guide/topics/ui/notif...
Adding the notifications when the feed has been updated would make the app a bit more useful.
https://github.com/saileshmittal/phonegap-system-n...
Also, I thought I had the back button issue resolved but apparently I made it worse for some users :-\
http://stackoverflow.com/questions/8251586/phonega...
It actually creates errors for me so I wasn't able to use this method to "fix" it. Thoughts?
2) I'm ashamed to say it, but I didn't know navigator.app.* existed. I just now asked on the forums where this is documented.
Thanks for this code.
I tried it on a Galaxy S2 and the scrolling "jumps" a little bit, it's not smooth, do you also have the same problem ? Do you know where it could come from ?
Thanks,
Hary
Here's my feed url
http://feeds.feedburner.com/TattvaGyan
I am using wordpress on my original site. Any ideas on how to fix this?
Your feed looks like this
http://feeds.feedburner.com/RaymondCamdensColdfusi...
And mine looks like this
http://feeds.feedburner.com/TattvaGyan
I have enabled full feeds but when you view the xml version only the start description shows up with no image.
I am asking if the app can be modified to read the hidden <[CDATA thing?
OR
How do i optimize my feed so that it shows the complete feed with images.
Any Ideas?
entry = { title:$(v).find("title").text(), link:$(v).find("link").text(), description:$.trim($(v).find("content:encoded").text())
doesnt work :(
best regards
stefan
my rss feed looks like this:
<item>
<title>MT...</title>
<pubDate>Thu, 09 Feb 2012 13:24:05 +0100</pubDate>
<link>https://...</link>;
<guid>https://...</guid>;
<content:encoded><![CDATA[Fachbereich:]]></content:encoded>
</item>
and i want to read out the line with content-encoded?!
http://www.raymondcamden.com/index.cfm/2012/2/16/Q...
https://plus.google.com/115106614688778962135/post...
and specifically:
http://www.steveworkman.com/html5-2/javascript/201...
pubDate: $(v).find("pubDate").text()
Other fields (title, description) are ignored and not displayed. Any idea of a workaround on Android 2.2?
I've tried to set a new main page and set load a url into the RSS variable based on which link the user clicks, but I'm obviously borking it somewhere, so now I'm selfishly asking for help by suggesting it as a blog post :)
Either way, thanks for the tips so far!
I ended up using Google Feed API, which is much faster to execute, really easy to use and more reliable across platforms. The only drawback is that if the feed contains HTML, all "class" and "id" properties are removed. Here is the code to insert in your JS file, instead of your $.ajax() call:
var feed = new google.feeds.Feed("http//insert_your_feed_URL_here");
feed.setNumEntries(10);
feed.setResultFormat(google.feeds.Feed.JSON);
feed.load(function(result) {
if (!result.error) {
var entries = [];
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
// Do whatever you want with each entry
entries.push(entry);
}
localStorage["entries"] = JSON.stringify(entries);
} else {
// If nos results in the feed
}
});
and add this in index.html:
<script type="text/javascript" src="http://www.google.com/jsapi"></script&g...;
<script type="text/javascript">
google.load("feeds", "1");
</script>
To get the "class" and "id" properties back, I tried switching to a mixed result (JSON + XML) using "google.feeds.Feed.MIXED_FORMAT" parameter. The idea is to set entry.content from JSON with the value of <content:encoded> from the XML part of the result, as XML stores the full HTML without any cleanup.
I tried adding the 2 following lines in the FOR loop above:
entry.content = result.xmlDocument.getElementsByTagName('item')[i].getElementsByTagName("content:encoded")[0].firstChild.nodeValue; // Get <content:encoded> content and replace entry.content with full HTML of the item
entry.xmlNode = null; // To prevent a circular JSON Object
But it throws an error. It seems that <content:encoded> is not found. Console log shows: "Uncaught TypeError: Cannot read property 'firstChild' of undefined"
If somebody finds a way to make this work, it would be fantastic. For the moment, I stick with this solution, as it gives really good results with both Android 2.2 and 2.3. Moreover, response time is much better (maybe my custom server providing the feed is not that fast).
@Raymond: Feel free to use this code for a Part 4 ;) Parts 1,2 and 3 helped me a lot to understand how to parse a feed and to use the results. Thanks!
@Vince: Didn't know about the Google Feed API. It looks like your getting JSON back - that's sweet. All things being considered, you almost _always_ want to work with JSON, not XML.
It has been driving my crazy for 3 days and I need to express it here :D So your code works perfectly side alone. However, when I try to link it from another html file, it seems not to work. Meant that I already have my index.html, and your code is feed.html, I try to call feed.html in the list in index.html as below:
<ul data-role="listview" data-inset="true">
<li><a href="feed.html"><img src="images/feed.png" width="25" height="22" class="ui-li-icon" title="Feed">Feed</a></li>
When the link is triggered, it shows only the head and footer. Not the content at all.
Do you have any ideas on this issue?
For the comment above, I have found a way to work around it.
The main.js needs to be included in the index.html not feed.html in order to make it work. I found an useful post that said jquery will create another 'blank' page with the used js and css in its parent.
It leads to another issue that, reanderentry function will not work to create a viewable frame for each entry.
Sorry to ask again, but how do you think about this? :)
try using rel="external" on your link
Thank for your comment, that works! Also found another way to do it is to disable ajax by data-ajax="false" :)
first off, this is awesome. Thanks for posting the RSS series.
Here's the question. I'm looking to present each RSS feed entry in its own container. Much like a pinterest board.
Second, i would also like to include several RSS Feeds under their own tab. How do i do that.
FYI> I am mashing the Foundation HTML5 Responsive Framework with your RSS JQuery Mobile framework. So far so good, just looking for a bit more adaptation.
Thanks a million again. Mike
Tabs or another issue though. I haven't found a good "tab" solution for mobile. The other issue too is size. What do you o when you have 20 feeds? You don't want 20 tabs at the bottom.
<!-- Panel -->
<div class="row">
<div class="twelve columns">
<div class="panel">
<!-- RSS Feed -->
<div data-role="content">
<div id="status"></div>
<ul id="linksList" data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d">
</div>
<!-- RSS Feed -->
</div>
</div>
</div>
s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></li>';
You would change the li to p. And instead of the ul id="linklist", you can change it to a simple div with an ID of whatever you want. Then you inject it with
$("#someid").html(s)
oh, one more thing. How would one display an img within the #mainpage list?
Also, the Foundation Framework works really well for tabs. Check it out.
http://foundation.zurb.com/
http://www.raymondcamden.com/index.cfm/2011/12/19/...
main.js >
$(".contentLink").live("click", function() {
selectedEntry = $(this).data("entryid");
});
function renderEntries(entries) {
var s = '';
$.each(entries, function(i, v) {
s += '<p><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + v.title + '</a></p>';
});
$("#pinBoard").html(s)
$("#pinBoard").listview("refresh");
}
html >
<!-- Panel -->
<div class="row">
<div class="twelve columns">
<div class="panel">
<!-- RSS Feed -->
<div data-role="content">
<div id="status"></div>
<div id="pinBoard"></div>
<!-- RSS Feed -->
</div>
</div>
</div>
<!-- Panel -->
$("#pinBoard").listview("refresh");
That tells jQuery Mobile to refresh a list view, which you don't have anymore.
First of all, this is awesome. Thanks for posting the RSS series.
I am newbee of jquery. I want to use your code in my application in that such a way:
I wrote an application using phonegap wizard. I want to make a link to your code via a button click such as:
<li><a href="#api-rss">RSS Feed</a></li>
When i copy and paste your code in my div where id's is "api-rss", the code doesn't work because your code include "pageinit" function. How can i adapt your code into a div section? Please help me.
Best regards.
PS: Sorry my bad English, I hope you understand me.
To be clear, jQuery Mobile is NOT required for this type of app. I used it to handle the display. You could use my logic in a non-jQuery Mobile app. The changes for that would be a bit too much for the comments section though.
When I try to use jquery mobile's theme roller with your page the theme does not work and the page instead just uses the stock themes that come with jquery mobile. Any advice on fixing that?
Try that link, sorry.
I want to make a app who can read 2 RSS feeds.
This is my first RSS feed:
http://www.hapdedag.nl/daghap-enschede/feed/
It is a newsfeed who displays all the news correctly with your RSS reader.
Secondly i got a Food Feed:
http://www.hapdedag.nl/external/daghap-enschede.xm...
I want to display the restaurant and if people click on it they see the dish of the day and some more information.
How do i get these 2 RSS Feeds working???
The first one, the news feed is working but I do not know how to fix the other RSS Feed correctly???
One would be to simply have your app start with a list of two items - one for RSS feed one, the other for the second.
Clicking that leads to the list of entries just for that feed.
Another way would be to get the RSS feeds for both and merge them together. That would require a bit more work.
But what is the best way to do it??
Make 2 JS files? Or 1 JS file with more functions??
Do i need to copy and rename all the variables and functions or can I skip some??
But i got only 1 problem.
It is a app for a meal of the day.
Now the app shows alle the meals from the whole week.
How do i fix this?
Looks at the feed:
http://www.hapdedag.nl/external/daghap-enschede.xm...
I need the getDate() function and compare with <day>7</day> in XML...
var s = '';
var d = new Date();
if(d.getDate == v.day){
$.each(foodentries, function(i, v) {
s += '<li><a href="#contentfoodPage" class="contentfoodLink" data-entryfoodid="'+i+'">' + v.restaurant + '</a></li>';
});
$("#foodList").html(s);
$("#foodList").listview("refresh");
}
}
Something like this???
function renderfoodEntries(foodentries) {
var s = '';
var d = new Date();
var n = d.getDate();
$.each(foodentries, function(i, v) {
if(n == v.day){
s += '<li><a href="#contentfoodPage" class="contentfoodLink" data-entryfoodid="'+i+'">' + v.restaurant + '</a></li>';
}
});
$("#foodList").html(s);
$("#foodList").listview("refresh");
}
Do I need to put more into my JS???
https://www.google.com/search?rlz=1C1CHKZ_enUS439U...
$.each(foodentries, function(i, v) {
That is -expected-.
What may be the issue though is that the app is not being vocal about what is doing when it loads up. We could improve that.
I can say in my testing it ran fast, but obviously, it depends on the RSS feed you are trying to load, network conditions, etc.
Any app that needs the network for it's data is going to have that "problem" - there isn't much you can do about it. (Outside of what I said above - ensuring there is good user feedback and you can employ caching too).
You need only this:
content:$(v).find("[nodeName='content:encoded']").text()
Only one Question:
How can i put $.mobile.pageLoading(); and $.mobile.pageLoading( true );
into this script ?
Thanks.
Cheers!
because of my last question.
All what i want to do is to add a loading cycle for the time the rss news will be synct.
I tryed a lot right now with $.mobile.pageLoading(); and $.mobile.pageLoading( true );
but with no results :(
Would be very nice if you can give me a tip :)
Although I'm getting further and further with my app, it doesn't function properly when I click a feeditem. It loads mainPage but it doesn't show the feeditem or comes up with gibberish.
I've followed your tutorial step by step (part 1- 3) but I can't find out what I'm doing wrong. If I set up the app with the quickstart guide from phonegap and use your tutorial should it just 'work' or am I still missing something? Could I send you my eclipse project or is that too much to ask?
Cheers!
nevermind haha. I accidentally added the contentPage div two times to index.html. It loads the feeditem perfect but loads a blank contentPage immediately after it has been loaded.
Above comment can be removed if you want =)
Cheers!
The next thing I want to do is to show a twitterfeed in my app. I guess I can use this script pretty much in the same way for this, amiright?
I´ll be using this (for example) http://search.twitter.com/search.rss?q=cfjedimaste...
For my app, I tweaked the code in the main.js file to allow the "Read Entry on Site" to use the Childbrowser plugin in PhoneGap so I can view my blog without launching the web browser, plus I'm stuck using the WebView preference for an iFrame on one of my pages to keep it from wigging out. Since WebView is turned on, sending links to the web browser has not been possible... or at least I don't know how to make it happen. (Rookie at Javascript but learning.)
Anyway, here's my code for the childBrowser plugin:
contentHTML += '<p/><a href="#" onclick=window.plugins.childBrowser.showWebPage("'+entries[selectedEntry].link + '")>Read Entry on Site</a>';
I would like to use the Childbrowser plugin for other links that show up in my feed. Can you tell me how to make this happen?
Thanks in advance - G
There is one interesting problem that I have. Peter in one of the earlier comments said that he was having trouble putting the feed on a different page than index.html. I put the main.js reference in my index file and the feed appears on the page (latest.html), but the links don't do anything when they are clicked.
I tried adding the rel="external" based on another comment, but that didn't work either. Do you have any insight into this?
It's not your code -- it's my own lack of knowledge with JQuery and PhoneGap.
My content is coming from blogger and using feed burner to convert the RSS to RSS2. When my feed comes to my app, any text or pictures that have links tied to them open up in WebView on my iOS device and I don't have a header with a back button to get back to the previous screen. I have to run the app with WebView enabled as I have an iFrame on one of my #pages that launches Safari when the app loads and enabling WebView is the only way I can prevent that from happening.
Here's my feed address: http://feeds.feedburner.com/evscerevolution so you can test.
All my code is on GitHub at https://github.com/jjgleim/eRev-RSS-Feed-Help.
first of all, thanks a lot for the tutorial, it was really a big help!
I am trying to get the <media:thumbnail> from my RSS-Feed in the App, but unfortunately none of my pitifully attempts has been successful :/
Could you give me some hint how this could work, please?
Thanks a lot in advance!
@A-Z: You may need to ensure your JS code handles it right - maybe:
title:$(v).find("media:thumbnail").text(),
but I don't know if .text() is right for you - if that XML element has subkeys you will need to use a different way to get to it.
The xml is simple, looks like this:
<item>
<title> </title>
<link> </link>
<description> </description>
<pubDate> </pubDate>
<media:thumbnail height="" url="" width="" />
</item>
and in the .js I tried something like this
media:$(v).find("media:thumbnail").text(),
or this
media:$(v).find("media:thumbnail").attr("url"),
The first one causes absolutely nothing, the second one "undefined"… ?
It is quite frustrating to be honest, because actually it should work! :(
var ray = $(v).find("media:thumbnail");
console.log(ray);
See if it shows something.
Here the modified code, perhaps you see something I don't?
...
function renderEntries(entries) {
var s = '';
$.each(entries, function(i, v) {
s += '<li><a href="#contentPage" class="contentLink" data-entryid="'+i+'">' + '<div class="navtitel">' + v.title + '</div>' + '<div class="small-nav">'+ v.pubDate + '</div>' + '</a></li>';
});
$("#linksList").html(s);
$("#linksList").listview("refresh");
}
//Listen for main page
$("#mainPage").live("pageinit", function() {
$.ajax({
url:RSS,
success:function(res,code) {
entries = [];
var xml = $(res);
var items = xml.find("item");
$.each(items, function(i, v) {
entry = {
title:$(v).find("title").text(),
link:$(v).find("link").text(),
pubDate:$(v).find("pubDate").text(),
description:$.trim($(v).find("description").text()),
};
entries.push(entry);
entries.reverse();
var ray = $(v).find("media:thumbnail");
console.log(ray);
});
//store entries
localStorage["entries"] = JSON.stringify(entries);
renderEntries(entries);
},
error:function(jqXHR,status,error) {
//try to use cache
if(localStorage["entries"]) {
$("#status").html("Using cached version...");
entries = JSON.parse(localStorage["entries"])
renderEntries(entries);
} else {
$("#status").html("Sorry, we are unable to get the RSS and there is no cache.");
}
}
});
});
$("#mainPage").live("pagebeforeshow", function(event,data) {
if(data.prevPage.length) {
$("h1", data.prevPage).text("");
$("#entryText", data.prevPage).html("");
};
});
//Listen for the content page to load
$("#contentPage").live("pageshow", function(prepage) {
//Set the title
$("h1", this).text(entries[selectedEntry].title);
var contentHTML = "";
contentHTML += '<div class="bg-txt-s">';
contentHTML += '<h3>'+ entries[selectedEntry].title + '</h3>';
contentHTML += entries[selectedEntry].ray;
contentHTML += '<div class="small">' + entries[selectedEntry].pubDate + '</div>';
contentHTML += entries[selectedEntry].description;
...
$.each(items, function(i, v) {
The line above is run for each of the items in the XML. Now - another thing to consider is that not all of your items may have a thumbnail.
Ok, tried it the other way, still not working unfortunately… I am sure that every entry has got a thumbnail, here the whole construct of the xml and the url in <media:thumbnail url="" > is always filled with an image url:
http://pastebin.com/1ysXTsiZ
And just to make sure, I made not more failures, here also the code of my main.js:
http://pastebin.com/NPKuqe0e
Thanks a lot for your effort!
I tried changing the <media:thumbnail> in my .rss to <media> and in the main.js I added ray:$(v).find("media").attr("url"),
and now at least the url of the image is displayed! That could been seen as a little progress perhaps, yippie! :)
Sorry, I am an absolute newbie in this field, this is my first app at all...
Do you think I should rather try on this way with the <media> and the .attr("url"), and if so, what would be the wisest way?
contentHTML += '<img src="';
contentHTML += entries[selectedEntry].ray;
contentHTML += ' "/>';
in my main.js, and the pictures are there!
Thanks for your help! :)))
do you see any possibility to use a feed which doesn't end with .rss in the app? Like a Yahoo Pipes feed (ends with ;_render=rss") or a Flickr feed?
Alright, I got the RSS feed working exactly as I wanted except for one thing. When they tap the entry, I want it to show everything in the description tag. For example, if you look at the source code of my feed ( http://www.lambdachi.org/candc-category/candc-rss/... ), the description tag has the text for the entire post. However, in Firefox and in your RSS feed, it shows "Continue Reading". Any ideas on how to show the full tag?
-Sandy Meers
Look at your blog provider. (I say "your" because I assume this is your feed.) Some blogs provide a 'short' RSS feed and some provide a full entry version.
I needed to use my RSS2 feed (/feeds/rss2), and that generated the content in the source code. I modified your Ajax call as well. Where you looked for description:$.trim($(v).find("description").text()), I changed the part in quotes to "encoded". RSS adds a <content:encoded> tag around the content and looking for just encoded gave me the near-close result that I was looking for.
Again, thanks for all of your help and for the great tutorial!
With your help my app is running superb. With a lot of tweaking it is now showing the thumbnail and title of a the items (directly from my custom Wordpress feed) on mainPage and featured images, attached images (if any), title and content on page blogContent.
I came up with another idea. What I'd love to have is more pages which only show the items in certain categories (my feed now also shows the category in which the item was posted). Could you help me or point me in the good direction?
Thanks!
1) How do you do more pages? That is up to the UI framework you use. You could use tabs at the bottom of the screen for categories - but that would be a bit limited width wise. You could have a button that linked to a page that then listed categories. Again, there's different ways of doing this.
2) And of course -your category list is dynamic. Your blog may add the "Raymond Camden" category one day. Do you try to support that or do you get by with hard coded categories? You could simply use the categories from the RSS feed, but that's going to be dependent on your current content. If my last 10 entries are JUST on ColdFusion, then you wouldn't know that I have a jQuery category as well. And heck - even if you cache - people remove categories too. I did in my last redesign.
3) Probably the easiest aspect would be the filtering. Just use XPath. Of course, most blog engines support category specific RSS feeds, so you would simply switch to that URL.
I'm using JqueryMobile. I already ran into the problem of limited width. I fixed it with using custom buttons in custom CSS without any JQMobile.
I want three extra pages. The first one, (home (or mainpage)) which show all the items in my feed. The second, third and fourth need to show items which are in the main feed but are rarely posted but interesting enough to have an own page (these categories have a lot of views compared to other categories). My problem is not the feed but more the javascript itself, I don't know where to start. Could you give me a simple example of javascript (main.js) where one page shows category X and one page shows category Y? I'll be able to work it out from there. At the moment I don't know how to let certain pages load certain items of the feed.
Thanks :)
My code works by listening to pageinit for mainPage. Basically, "When this page is created, do this." When you add other pages, you can add your own code for them. You could- if you wanted -almost cut and paste my existing code and simply use a different RSS url (the category specific one).
I hope that helps. If I feel the code makes sense for a blog entry, I will write it, but right now, I don't think I will. As I mentioned, I think my next entry will be an update to the latest PG code base, latest JQM code base, and make use of the simpler Google Feeds API.
I actually did an example of this for my jQuery Mobile book. This code is open source here:
https://github.com/cfjedimaster/jQuery-Mobile-Book...
Of course, for a detailed explanation you need to buy the book:
http://www.amazon.com/dp/1849517266/ref=as_li_qf_s...
Thanks!
http://pastebin.com/EbMRYtFh
Thanks a lot, of course it works! :)
Here are some questions:why there are no
"<script type="text/javascript" src="cordova-1.8.0.js"></script><script type="text/javascript">"
in the index.html file?
why can't the program work properly for me?Does it because I missed some setting in elipse or jquery?Thanks for your help.
"<script type="text/javascript" src="cordova-1.8.0.js">
Almost always you need the Cordova JS file to speak to the hardware. But this application doesn't need it. It actually doesn't do anything device specific at all.
2) "why can't the program work properly for me"
No idea. You will need to do some debugging on your side.
$(".contentLink").live("click", function()
"Object Expected"
Please help me.
http://www.raymondcamden.com/index.cfm/2012/5/10/S...
ActivityManager: Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.camden.rssdemo/.RSSDemoActivity }
And I just read your blog and filter the "Web Console" and "Console",nothing there
By the way,the jquery-moblie-1.0 has a "flash back" problem,that is when clicking a link it will flash back to the mainpage ,then go to the next page,after update to jquery-moblie-1.1,this problem is solved,hope someone would find this useful:)
But when I put the .xml file in to the project file and open it locally, it works fine.
I wonder it may be the cross-domain problem,can you give me some suggests,thanks.
This is a topic that is quite important to me. As I've blogged more on client side development over the past few years, I've seen a growing number of people like yourself. (That sounds a bit derogatory - please do not take it as such.) There is a serious lack of knowledge in regards to how to debug issues with JavaScript applications and mobile apps as well. Because of this I've begun work on a presentation to cover the basics. The topic is too much for this blog post, but it is sorely needed. For now what I'm recommending is some basic Googling on your part in terms of debugging JavaScript. There -is- a lot of content out there. In the meantime, I can say that when my presentation is done (I'm giving it to two places next month), I'll be giving it online as well so please subscribe to my blog for updates.
I feel like I'm letting you down here a bit - but at the same time - I feel like it is just too much for this entry now and it makes sense to address it more fully in a place of it's own.
I think it miss some important files. So Can send an E-mail for me.(yjjxwx@qq.com or yjjxwx@sina.com)
I am a Chinese boy, study in a collage.
I am very poor in English, many information what I don't know how to say.
I am sorry for that.
Any suggestions would be helpful.
Thanks for this tutorial, helped me a lot!
When feed is ok, use localStorage to store entries.
Please, take a look: http://jsfiddle.net/elektrorl/QQhU7/
Why I'm i getting only one entry, and this one is near the end of the list. Why only this one?
entries = [];
is inside your each loop, which means the array is getting destroyed each time. Move it to before the each loop.
Thank You
Budi
Your question doesn't make sense. If you are asking how to handle RSS in general with CF, there is a <cffeed> tag.
"and what do you think is it the right methode to develop mobile who get data from remote site ?"
That is a bit broad. Libraries like jQuery make it relatively easy to load remote data. CF is also simple to use for generating JSON data.