3. RSS not work in Onsen

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

RSS not work in Onsen

  • K

    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!

    0
  • 侍

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

    0
  • K
     

    <!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>
    0
  • 侍

    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.

    0