RSS not work in Onsen
-
Hi!
Sorry for my English!
It is my first Project in Monaca!
I want make RSS-reader.
I was make a blank project without any UI. And it work.
But when I was create project with Onsen Tabbar, then project does not work.
Project include files:
jquery.rss.min.js
jquery-1.6.4.min.js
and index.html:<head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jquery.rss example</title> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.rss.min.js"></script> <script> jQuery(function($) { $("#rss-feeds").rss("http://battlebrotherhood.ru/feed/", { limit: 10, entryTemplate:'<li><a href="{url}">[{author}@{date}] {title}</a><br/>{teaserImage}{shortBodyPlain}</li>' }) }) </script> </head> <body> <div id="rss-feeds"></div> </body>
In index.html of Onsen-project i was paste code between <head> and </head>, and <div id=“rss-feeds”></div> between <body> and </body>.
It`s not work!
Where the error?Thanks regard!
-
So chances are, you have malformed Onsen tags. Can you post your whole index.html or your Onsen code?
-
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap() .controller('AppController', function() { }); ons.ready(function() { console.log("Onsen UI is ready!"); }); </script> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.rss.min.js"></script> <script> jQuery(function($) { $("#rss-feeds").rss("http://battlebrotherhood.ru/feed/", { limit: 10, entryTemplate:'<li><a href="{url}">[{author}@{date}] {title}</a><br/>{teaserImage}{shortBodyPlain}</li>' }) }) </script> </head> <body> <ons-page ng-controller="AppController as app"> <ons-tabbar> <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab> <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab> </ons-tabbar> </ons-page> <ons-template id="page1.html"> <div id="rss-feeds"></div> <ons-page id="rss-feeds">This is a blank page</ons-page> <script> document.addEventListener("init", function(e) { if (e.target.matches("#rss-feeds")) { ons.notification.alert({ message: "Page 1 is initiated." }) } }) </script> Page 1 </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> Page 2 </ons-page> </ons-template> </body> </html>
-
I had to do some modification, but this works:
Place this in the head of your index.html:
document.addEventListener("show", function(event){ if(event.target.id=='rssFeeds') { jQuery(function($) { $("#rss-feeds").rss("http://battlebrotherhood.ru/feed/", { limit: 10, entryTemplate:'<li><a href="{url}">[{author}@{date}] {title}</a><br/>{teaserImage}{shortBodyPlain}</li>' }) }); } });
Place the below in your body:
<ons-page> <ons-tabbar> <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab> <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab> </ons-tabbar> </ons-page> <ons-template id="page1.html"> <ons-page id="rssFeeds"> Page 1 <div id="rss-feeds"></div> </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> Page 2 </ons-page> </ons-template>
So you had some malformed Onsen tags and you had JS in the templates which you cannot do. Basically, just envision your entire application as a single webpage and build it from there.