RSS not work in Onsen

kornalexandr2

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!

munsterlander

So chances are, you have malformed Onsen tags. Can you post your whole index.html or your Onsen code?

kornalexandr2

<!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>

munsterlander

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.